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FORSYORD 


随 着 计算 机 网 络 的 迅速 发 展 ,Internet 已 经 成 为 人 们 生活 中 的 重要 组 成 
部 分 。 政 府 机 关 通 过 网 站 实现 电子 政务 ;企业 利用 网 站 展示 企业 形象 .推广 
产品 并 进行 电子 商务 活动 ;个 人 建立 一 个 具有 独特 风格 的 网 站 来 展示 与 宣 
传 自我 。 因 此 ,搭建 网 站 、 设 计 精 美的 网 页 来 吸引 浏览 者 成 为 大 家 共同 关注 
的 目标 。 学 校 里 和 社会 上 涌现 出 了 大 量 的 网 页 设计 爱好 者 ,他 们 迫切 希望 
尽快 学 习 网 站 规划 与 网 页 设计 的 知识 ,并 将 其 应 用 于 网 站 建设 的 实践 中 。 

本 书 力求 “理论 与 实践 的 完美 结合 ,突出 能 力 结构 的 培养 "。 通 过 对 本 
教材 的 学 习 , 学 生 能 够 熟练 运用 软件 进行 网 站 的 编辑 、 网 页 界面 和 网 页 动画 
的 设计 ;具有 进行 商务 网 站 建设 的 自主 策划 与 设计 能 力 ;掌握 从 事 网 站 编 
辑 、 网 页 美工 创意 ,动漫 设计 ,平面 设计 等 方面 的 综合 技能 。 


1. 本 书 的 内 容 
模块 内 窜 目 的 
eh 。 项 目 调查 ; 网 站 项 目 需求 分 析 
。 网 站 规划 的 内 容 
: 。 方案 决策 ,网 站 规划 
国 中 六 四 。 方案 制定 , 网 站 建设 项 目 实施 广 
“网 站 的 测试 ,发布 与 维护 | ”方案 抽 定 ， 
。 网 站 规划 案例 
。 网 页 设计 基础 知识 
。 创建 站 点 
。 制作 页 面 
网 站 编辑 。 网 页 布局 使 用 Dreamweaver CS5 软件 创建 站 
CsS 样式 表 点 .布局 网 页 .利用 模板 编辑 网 站 
。 使 用 表单 
。 模板 与 库 的 应 用 
。 制 作 多 媒体 站 点 
平面 设计 基础 。 了 解 平面 设计 基础 知识 ,如 图 像 
网 页 设计 基础 | 。 色 彩 的 应 用 类 型 .图 像 分 辩 率 等 术语 的 概念 
理论 。 网 页 的 构图 设计 。 丁 解 色彩 应 用 和 网 页 构图 的 技巧 
。 网 页 设计 的 流程 。 掌握 网 页 设计 的 工作 流 各 


《 六 [miiinilSmmRi | 
续 表 
模 块 内 容 目 的 
。 静态 图 像 的 制作 
利用 Fireworks 设计 网 页 。 动画 图 像 的 制作 利用 Fireworks CS5 进行 平面 图 
界面 。 动态 交互 图 像 的 制作 像 设 计 和 网 页 界面 设计 
。 网 站 首页 的 设计 
。 Flash 的 基本 功能 
利用 Flash 设计 网 页 动画 。 应 用 Flash 设计 动画 利用 Flash CS5 设计 网 页 动画 
。 制作 Flash MTV 
po 。 Photoshop CS5 基本 应 用 利用 Photoshop CS5 设计 网 站 
利用 Phetoshon 设计 网 页 | “iiowoeliop:CS5 网 页 说 计 首页 


2. 本 书 的 特点 

本 书 是 根据 普通 高 等 院 校 培养 应 用 型 特色 人 才 的 目标 而 规划 的 ,按照 教育 部 应 用 型 
人 才 培 养 的 教学 要 求 进行 教材 的 编写 ,依据 从 基础 理论 到 专业 技能 再 到 工程 实践 三 个 阶 
段 对 教材 进行 开发 。 

一 是 教材 实例 来 源 于 企业 实际 资料 ,力求 学 生 所 学 的 教材 内 容 能 够 满足 社会 和 用 人 
单位 的 实际 需求 。 

二 是 教材 的 内 容 包 括 专 业 及 职业 素养 的 三 个 方面 : 基础 知识 .专业 技能 和 工程 实践 ， 
满足 应 用 型 本 科学 生 的 培养 目标 。 

三 是 对 学 生 而 言 ,教材 内 容 尽 量 使 用 简洁 明了 的 语言 和 丰富 的 图 片 以 及 科学 的 逻辑 
思维 过 程 以 方便 学 生 学 习 ; 对 教师 而 言 ,在 教学 上 严格 规定 教师 的 教学 方向 ,将 教学 内 容 
中 的 理论 部 分 与 实践 部 分 的 课时 进行 合理 分 配 ,能 够 让 学 生 迅 速 跟 进 ,快速 领悟 。 

四 是 通过 众多 实际 案例 讲解 ,不 但 使 学 生 能 掌握 网 站 规划 及 网 页 设计 的 基础 知识 , 同 
时 又 能 提高 学 生 的 实践 操作 能 力 。 

五 是 本 书 的 内 容 丰 富 ,配套 资料 齐全 。 

作为 陕西 省 精品 课程 “网 页 设计 与 制作 ”的 配套 教材 ,教学 资源 非常 全 面 , 有 全 套 的 
电子 课件 .电子 教案 、 建 站 素材 .教学 大 纲 、 实 验 指导 习题 解答 、 视 频 教学 等 ,以 及 书 中 
用 到 的 案例 集 、 彩 色 样 图 均 可 在 http://jpkc. xijing. edu. cn/web/ 网 站 上 下 载 ,或 发 邮件 
至 susan0513@sina. com 索取 资料 。 

本 书 由 杜 永 红 总 体 规划 并 负责 全 书 的 统 稿 工作 。 各 章节 编写 的 具体 分 工 如 下 : 第 
1 章 由 胡 一 波 编写 ,第 2 一 8 章 分 别 由 谢 恬 、 间 文 炊 、 郭 国庆 、 王 冬 霞 、 文 小 森 、 危 小 波 、 巨 春 
飞 、. 师 前 、 任 志 安 编写 ,第 9 一 12 章 由 杜 永 红 编 写 ,第 13 章 由 杜 永 红 、 梁 林 蒙 编写 。 由 于 作 
者 水 平 有 限 , 书 中 难免 有 不 足 与 错误 之 处 , 敬 请 读者 批评 指正 。 
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本 章 主要 介绍 网 站 规划 的 方法 ,主要 包括 网 站 规划 的 流程 .网 站 规划 的 内 容 、 网 站 规 
划 的 原则 ,并 通过 对 一 个 案例 的 分 析 , 进 一 步 讲解 如 何 撰写 网 站 规划 方案 。 


【本 章 学 习 目 标 】 


。 项 目 调查 : 网 站 项 目 需求 分 析 ; 
。 方案 决策 : 网 站 规划 ; 


。 方案 制定 : 网 站 建设 项 目 实施 方案 的 制定 。 


1.1 网 站 规划 的 流程 


设计 网 站 之 初 ,大 多 数 设计 者 都 会 对 将 要 制作 的 网 站 有 一 个 设想 和 期 望 。 比 如 希望 


网 站 能 够 获得 大 家 的 认可 ,或 者 希望 网 站 能 够 
赢利 ,或 者 成 为 大 家 交流 的 平台 等 。 如 果 和 希望 
网 站 能 够 满足 自己 和 客户 的 需求 ,必须 在 规则 
网 站 之 前 预先 收集 很 多 信息 ,避免 出 现 事 倍 功 
半 的 结果 。 网 站 的 规划 流程 示意 图 如 图 1. 1 
所 示 。 

网 站 规划 的 工作 流程 如 下 。 

(1) 了 解 客户 的 需求 。 只 有 了 解 制作 网 站 
的 真正 目的 ,才能 设计 出 满意 的 网 站 。 比 如 某 
企业 希望 通过 网 站 获得 更 多 的 知名 度 , 则 就 要 
在 宣传 推广 方面 进行 重点 设计 。 大 家 熟知 的 


了 解 管理 者 对 网 络 的 需求 
了 解 企业 中 未 来 网 站 的 管理 者 


站 在 他 人 的 角度 思考 问题 
合理 分 配 网 页 版 面 


规划 后 追踪 调查 


图 1.1 网 站 规划 流程 图 


一 些 大 型 网 站 如 腾讯 .新 浪 等 ,都 是 通过 大 力 推广 其 网 站 ,然后 才 陆 续 推出 一 些 拍 卖 网 、 广 


告 位 等 营利 项 目 。 


(2) 了 解 管理 者 对 网 络 的 需求 。 这 里 要 强调 的 是 ,如 果 管 理 人 员 对 网 络 比较 了 解 , 那 
么 在 规划 网 站 时 就 应 当 根据 自己 的 经 验 为 客户 打造 他 们 真正 需要 的 网 站 ,避免 制作 完成 


后 再 多 次 更 改 。 
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(3) 了 解 企业 中 未 来 网 站 的 管理 者 。 虽 然 未 来 的 网 站 管理 者 不 是 决定 本 次 业务 合作 
与 否 的 关键 ,但 他 却 能 左右 项 目的 难 易 程度 。 尽 量 把 网 站 管理 者 的 一 些 爱 好 和 习惯 考虑 
进去 ,可 为 将 来 减少 修改 的 几率 。 

(4) 提出 方案 。 在 规划 方案 的 过 程 中 ,不 要 照搬 他 人 的 方案 ,而 应 认真 分 析 客 户 的 需 
求 以 及 综合 考虑 多 方面 的 因素 ,提出 切实 可 行 的 方案 。 

(5) 站 在 他 人 的 角度 思考 问题 。 在 制作 规划 的 过 程 中 .要 假设 自己 是 一 个 运营 者 , 关 
心 的 是 成 本 还 是 收益 ? 只 有 站 在 他 人 的 角度 思考 问题 ,才能 交 出 满意 的 作品 。 

(6) 合理 分 配 网 页 版 面 。 在 设计 网 页 的 时 候 不 要 将 太 多 功能 压缩 到 3 一 5 个 栏目 中 ， 
或 者 栏目 设计 得 多 ,功能 却 被 极力 压缩 ,使 付出 的 代价 和 得 到 的 回报 不 成 正比 。 

(7) 追踪 调查 。 体 现 设 计 人 员 的 专业 性 ,不 仅 是 把 规划 方案 制作 好 ,而 更 艰巨 的 任务 
是 后 期 的 服务 ,比如 定时 追踪 ,接受 反馈 意见 等 。 


1.2 网 站 规划 的 内 容 


网 站 规划 是 指 在 网 站 建设 前 对 市 场 进行 分 析 、 确 定 网 站 的 目的 和 功能 ,并 根据 需要 对 
网 站 建设 中 的 技术 ,内容 、 费 用、 测试 .维护 等 作出 规划 。 

网 站 规划 对 网 站 建设 起 到 计划 和 指导 的 作用 ,对 网 站 的 内 容 和 维护 起 到 定位 作用 。 
网 站 规划 是 网 站 建设 的 基础 和 指导 纲领 ,决定 了 一 个 网 站 的 发 展 方向 ,同时 对 网 站 推广 也 
具有 指导 意义 。 网 站 规划 通常 包括 以 下 内 容 。 


1.2.1 建设 网 站 前 的 市 场 分 析 


建设 网 站 前 应 先 做 以 下 这 些 内 容 的 市 场 分 析 。 

(1) 相关 行业 的 市 场 是 怎样 的 ,市 场 有 什么 样 的 特点 ,是 否 能 够 在 互联 网 上 开展 公司 
业务 。 

(2) 市 场 主 要 竞争 者 分 析 ,竞争 对 手 上 网 情况 及 其 网 站 策划 、 功 能 作用 。 

(3) 公司 自身 条 件 分 析 、 公 司 概况 、 市 场 优势 ,可 以 利用 网 站 提升 哪些 竞争 力 ,建设 网 
站 的 能 力 ( 费 用 、 技 术 、 人 力 等 )。 


1.2.2 ”建设 网 站 目的 及 功能 定位 


(1) 为 什么 要 建设 网 站 ? 是 为 了 树立 企业 形象 ,宣传 产品 ,开展 电子 商务 ,还 是 建立 
行业 性 网 站 ? 是 企业 的 基本 需要 ,还 是 市 场 开 拓 的 延伸 ? 

(2) 整合 公司 资源 ,确定 网 站 功能 。 根 据 公司 的 需要 和 计划 ,确定 网 站 的 功能 类 型 ， 
如 企业 形象 型 .产品 宣传 型 .网 上 营销 型 ,信息 服务 型 .网 络 销售 型 等 。 

(3) 根据 网 站 功能 ,确定 网 站 应 达到 的 目的 和 作用 。 

举例 说 明 ,如 果 建 设 一 个 教育 培训 网 站 的 目标 是 为 接受 培训 教育 的 学 生 服务 ,并 且 吸 
引 更 多 的 学 生 接受 该 校 的 教育 培训 ,因此 在 建设 网 站 时 就 要 围绕 这 个 目标 确定 网 站 的 栏 
目 , 如 图 1. 2 所 示 。 尽 管 建设 网 站 的 目标 不 尽 相同 ,但 是 有 一 点 必须 明确 , 那 就 是 目标 控 
制 得 越 详细 ,对 今后 的 工作 开展 越 有 利 。 
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1.2.3 分 析 目标 客户 及 潜在 客户 对 站 点 的 需求 


在 这 一 阶段 ,需要 掌握 一 些 典型 目标 客户 的 基本 信息 。 例 如 ,他 们 共同 的 兴趣 是 什 
么 ? 他 们 和 希望 从 站 点 中 获得 什么 ?要 得 到 这 些 信息 , 既 可 以 做 一 些 问卷 调查 ,也 可 以 从 亲 
友 .同学 那里 获得 一 些 建议 ,还 可 以 在 博客 .BBS 设立 反馈 信息 页 ,从 浏览 者 那里 得 到 实 
际 的 信息 ,然后 对 网 站 进行 规划 。 

例如 ,对 于 教育 培训 网 站 ,目标 客户 相对 固定 ,所 以 比较 容易 确定 用 户 对 站 点 的 需求 。 
通过 简要 分 析 即 可 确定 网 站 的 栏目 , 即 主 要 应 包括 “课程 分 类 ”“ 学 习 资 料 ”“ 教 师 简介 ”等 。 


1.2.4 域名 申请 


所 谓 域名 , 即 企业 在 互联 网 上 的 名 称 。 一 个 企业 的 域名 在 互联 网 中 是 唯一 的 。 通 过 
在 浏览 器 的 地 址 栏 中 输入 网 址 名 来 访问 企业 的 网 站 。 
域名 与 企业 商标 \ 企 业 标识 物 具有 异曲同工 的 效果 ,因此 又 把 域名 称 为 “网 络 商 标 ”。 


1. 域名 的 注册 


一 般 选 择 信誉 较 好 的 互联 网 信息 服务 提供 商 , 由 他 们 代为 办 理 域名 注册 事宜 。 例 如 
当地 的 电信 运营 商 、 国 内 较为 著名 的 ICP 服务 商 。 

2. 域名 的 命名 规则 

域名 的 重要 性 越 来 越 凸 显 ,已 经 成 为 互联 网 的 品牌 \ 网 上 商标 保护 必 备 的 产品 之 一 。 
一 个 好 的 域名 对 网 络 营销 的 成 功 与 否 具有 重要 意义 。 

(1) 域名 的 申请 与 企业 的 CIS 有 一 定 的 关系 。 营 造 一 个 独一无二 的 企业 品牌 是 建立 成 
功 域名 的 核心 。 企 业 域 名 的 命名 应 与 企业 名 称 .商标 等 统一 并 整合 ,构成 完整 的 企业 识别 系 
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统 (CIS) 。 比 如 www. ibm. com(IBM 公司 的 域名 ) 、www. dell. com(Dell 公司 的 域名 ) 等 。 

(2) 命名 域名 时 应 掌握 具有 唯一 、 易 记 、 形 象 好 的 特点 。 例 如 ,网 易 原 来 的 域名 叫 
netease. com, 后 主推 163. com ,更 适合 于 中 国人 记忆 。 

(3) 域名 由 字母 .数字 和 横 杠 组 成 ,不 能 有 空格 或 其 他 特殊 的 字符 。 

(4) 域名 长 度 要 短 。 


1.2.5 ”Web 服务 器 的 选择 


为 什么 要 选择 Web 服务 器 ? Web 服务 器 是 企业 信息 的 资料 的 存放 处 。 通 过 HTTP 
( 超 文本 传输 协议 ) 协 议 来 访问 企业 的 网 站 。 

如 何 构架 服务 器 呢 ? 有 以 下 两 种 选择 。 

(1) 企业 自己 架构 服务 器 (用 于 大 中 型 企业 ) ,建立 企业 内 联网 (Intranet) 接 人 到 互联 
网 。 需 要 专业 的 服务 器 、 接 人 外 网 的 专用 线路 .专业 的 网 络 管理 人 员 。 

(2) 租用 ICP 服务 商 的 服务 器 。 

虚拟 主机 服务 : 用 特殊 的 软件 将 计算 机 主机 分 成 若干 部 分 ,每 一 部 分 可 具有 独立 的 
域名 ,因此 一 台 Web 服务 器 可 提供 给 多 个 用 户 使 用 ,这 样 就 大 大 降低 了 成 本 。 这 种 方式 
适用 于 中 小 型 企业 。 

租用 独立 服务 器 : 租用 互联 网 服务 提供 商 (ISP) 的 整 台 服务 器 ,由 ISP 提供 IP 地 址 
和 必要 的 日 常 维护 等 。 这 种 方式 与 自 架 服务 器 相 比 成 本 较 低 ,适用 于 中 小 型 企业 。 


1.2.6 确定 网 站 风格 


确定 了 站 点 的 整体 风格 ,也 就 确定 了 网 站 内 容 的 表现 形式 ,包括 网 页 所 采用 的 布局 结 
构 ,颜色 ,字体 以 及 标识 图 形 ,图像 动画 等 。 不 管 采用 什么 样 的 风格 ,只 要 能 够 找到 文字 
与 图 像 和 其 他 网 络 媒体 的 平衡 点 ,提供 访问 者 想得到 的 信息 或 是 感受 ,最 终 提 高 访问 量 ， 
那么 网 站 就 成 功 了 。 

Internet 上 的 网 站 类 型 繁多 ,归纳 起 来 主要 有 以 下 两 种 。 


1. 信息 式 


信息 式 站 点 的 内 容 主 要 是 以 文字 信息 为 主 ,所 以 页 面 的 布局 要 求 整齐 划一 ,而 且 站 点 
中 的 每 层 页 面 都 会 有 一 个 导航 系统 ;顶部 区 域 大 多 使 用 一 些 比较 有 特色 的 徽标 或 公司 商 
标 ,顶部 中 间 有 一 些 广告 横幅 .页面 剩余 部 分 则 分 门 别 类 放置 了 大 量 的 文本 超 链接 ;整个 站 
点 对 图 像 . 动 画 等 这 些 带 有 修饰 成 分 的 多 媒体 信息 采用 比较 低调 的 处 理 方式 ,每 个 页 面包 含 
少量 图 像 或 动画 。 目 前 国内 知名 的 门户 网 站 ,例如 “搜狐 ”“ 新 浪 ” 等 都 属于 信息 式 的 网 站 ， 
如 图 1.3 所 示 。 


2. 画廊 式 


画廊 式 站 点 的 典型 代表 是 个 人 网 站 或 公司 网 站 ,表现 形式 主要 以 图 像 . 动 画 、 多 媒体 等 
高 新 网 络 技术 为 主 ,注重 通过 各 种 信息 手段 表现 个 人 特色 或 公司 要 宣扬 的 理念 ,如 图 1.4 
所 示 。 
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和 说 章光 了 如 病 所 长 下 各 车 度 慑 [Ca 对 加 在 独 岛 立 标 志 石 他 号 主权 天 末 自 题字 
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图 1.3 信息 式 网 站 : 新 浪 


图 1.4 画廊 式 网 站 


但 是 ,对 于 教育 培训 类 网 站 , 它 既 不 是 一 个 大 型 的 门户 网 站 ,也 不 是 一 个 公司 或 个 人 
网 站 ,所 以 网 站 的 风格 介 于 上 述 两 种 风格 之 间 , 既 需要 提供 大 量 的 文字 信息 ,也 需要 一 些 
图 像 .动画 来 吸引 浏览 者 。 
1.2.7 考虑 网 络 的 技术 问题 


在 设计 网 页 时 ,要 充分 考虑 到 网 络 速度 因素 ,也 就 是 常 说 的 “带宽 "问题 ,而 且 还 要 考 
虑 浏览 器 ,分 辩 率 等 。 
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1. 网 络 速度 因素 


关于 下 载 时 间 有 一 个 “8 秒 钟 原则 ”, 即 绝 大 多 数 浏览 者 不 会 等 待 8 秒 钟 来 完整 下 载 
一 个 网 页 ,所 以 ,在 设计 网 页 时 应 使 预计 的 下 载 时 间 少 于 8 秒 钟 。 如 果 页 面 的 下 载 速 度 太 
慢 , 则 访问 者 很 可 能 不 会 再 考虑 页 面 中 有 什么 吸引 人 的 地 方 ,而 很 快 地 按 下 浏览 器 上 的 
“停止 "按钮 ,或 是 转 到 其 他 的 网 站 中 。 

影响 网 页 显示 速度 的 最 主要 因素 是 图 像 . 动 画 ,视频 的 数量 和 大 小 。 加 快 页 面 下 载 速 
度 最 有 效 的 方法 ,就 是 适当 减少 页 面 中 的 图 像 .动画 ,视频 的 大 小 和 数量 。 


2. 浏览 器 与 分 辨 率 


显示 器 的 屏幕 分 辩 率 是 网 页 设计 者 应 该 特别 关注 的 因素 ,显示 器 屏幕 分 辩 率 是 指 计 
算 机 屏幕 水 平 与 垂直 方向 的 像素 值 ( 即 屏幕 的 宽度 与 高 度 ) ,通常 可 以 将 国内 用 户 显示 器 
分 辩 率 的 设计 标准 定 为 1024X768( 像 素 )。 


3. 即时 交互 性 与 插件 


考虑 网 站 是 否 需要 进行 交互 。 网 站 中 包含 多 媒体 对 象 时 ,客户 端 是 否 需 要 下 载 安装 
相应 的 插件 以 及 客户 是 否 愿 意 下 载 安装 ,由 于 大 多 数 浏览 器 内 置 了 Flash 播放 器 ,建议 多 
采用 Flash 动画 或 Flash 视频 。 


1.3 网 页 设计 的 原则 


一 个 好 的 站 点 的 诞生 ,需要 看 设计 者 的 功力 与 用 心 程度 。 应 当 考 虑 到 站 点 内 容 的 丰 
富 性 ,只 有 吸引 大 量 的 用 户 来 关注 ,网 站 才 会 有 生命 力 ,一 个 优秀 的 站 点 应 该 是 页 面 干净 、 
主题 突出 栏目 导航 清晰 明了 的 ,如 图 1.5 所 示 。 因 此 ,设计 者 应 当 注意 以 下 几 个 原则 。 

(1) 用 户 优先 。 无 论 什么 时 候 , 只 有 得 到 用 户 的 认可 ,设计 工作 才 算 做 到 位 。 设 计 者 
的 初衷 是 为 了 满足 广大 用 户 的 需要 ,并 不 是 用 来 自我 欣赏 。 

(2) 符合 “8 秒 钟 原则 ”。 在 设计 网 页 的 过 程 中 ,对 一 些 比较 大 的 Flash 动画 、 图 像 等 
要 尽量 做 技术 上 的 分 割 ,并 测试 网 页 开启 的 速度 是 否 合理 ,是 否 符合 “8 秒 钟 原则 ”。 

(3) 考虑 用 户 的 软 / 硬 件 配置 。 有 些 用 户 的 电脑 软 /硬件 配置 不 高 ,比如 存在 显示 分 
辩 率 不 够 或 浏览 器 版 本 较 低 等 。 设 计 者 应 当 从 用 户 的 角度 考虑 ,怎样 才能 让 用 户 可 以 正 
确 浏 览 网 页 。 

(4) 内 容 丰 富 。 丰 富 的 内 容 应 是 文字 、 图 像 和 音 /视频 的 巧妙 搭配 。 但 要 记 住 ,内 容 
须 与 网 站 所 要 提供 的 信息 相对 应 。 

(5) 着 手 规划 ,确定 特色 、 锁 定 目 标 。 确 定 网 站 的 性 质 、 内 容 \、 目 标 网 民 后 ,提供 及 时 、 
新 颖 、 丰 富 的 信息 ,吸引 浏览 者 驻足 网 站 。 

(6) 首页 的 重要 性 。 首 页 是 浏览 者 对 网 站 产生 第 一 印象 的 关键 ,要 秉持 干净 而 清爽 
的 原则 。 第 一 , 若 无 特殊 需要 ,尽量 不 要 放置 大 的 图 像 文件 或 程序 ,因为 它 会 增加 下 载 的 
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时 间 ,导致 用 户 失去 浏览 网 页 的 耐心 ;第 二 ,画面 不 要 设置 得 杂乱 无 序 , 因 为 用 户 有 可 能 会 
找 不 到 自己 需要 的 东西 。 

(7) 栏目 的 归 类 。 内 容 的 分 类 很 重要 ,可 以 按 主题 ,性 质 、 组 织 机 构 等 分 类 ,无 论 采 用 
哪 一 种 分 类 方法 ,都 要 让 用 户 能 够 容易 地 找到 目标 。 而 且 分 类 方法 要 尽量 保持 一 致 ,如 果 
混用 多 种 分 类 方法 则 易 使 用 户 感觉 混乱 。 此 外 ,在 每 个 分 类 选项 的 旁边 或 下 一 行 ,最 好 加 
上 该 选项 内 容 的 简要 说 明 。 

(8) 互动 性 。 整 个 设计 的 呈现 、 使 用 界面 引导 等 ,都 应 该 尽量 满足 互动 的 原则 ,让 用 
户 感觉 每 一 步 操作 都 能 得 到 互动 ,这 部 分 内 容 需 要 设计 技巧 与 软 /硬件 的 支持 。 

(9) 图 像 应 用 技巧 。 恰 当 使 用 图 像 可 以 让 网 页 增色 不 少 ,但 图 像 应 用 不 当 则 会 带 来 
相反 效果 。 应 尽量 采用 一 般 浏 览 器 均 可 支持 的 压缩 图 像 格式 ,例如 JPG 与 GIF 等 格式 。 
JPG 的 压缩 效果 较 好 ,适合 中 大 型 的 图 像 , 可 以 节省 传输 时 间 。 

(10) 背景 底 色 。 如 果 在 网 页 的 背景 中 添加 一 些 图 像 , 则 会 影响 阅读 的 时 间 。 所 以 没 
有 绝对 必要 的 话 ,尽量 避免 使 用 背景 图 像 ,保持 网 页 的 干净 清 来 。 

(11) HTML 格式 的 注意 事项 。 为 了 日 后 维护 方便 ,撰写 HTML 时 要 架构 完整 。 为 
了 优化 搜索 ,可 在 到 title 二 .二 meta 二 中 添加 关键 字 或 网 站 描述 。 

(12) 避免 滥用 技术 。 使 用 技术 时 ,首先 考虑 到 的 因素 是 传输 时 间 ; 其 次 是 技术 与 网 
站 性 质 及 内 容 相 配合 ;最 后 ,技术 不 要 用 得 多 而 杂 。 
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1.4 网 站 的 测试 发布 与 维护 
在 将 所 有 的 网 站 内 容 制作 完毕 后 ,就 可 以 将 网 站 发 布 到 Internet 上 。 但 是 在 发 布 之 
前 必须 对 网 站 进行 测试 。 
1. 测试 网 站 


在 测试 网 站 时 ,除了 对 所 有 影响 页 面 显示 的 细节 因素 进行 一 次 测试 外 ,页 面 中 的 超 链 
接 是 否 能 够 正常 跳 转 也 是 一 个 值得 重视 的 问题 。 将 本 地 站 点 文件 夹 在 计算 机 硬盘 中 移动 
位 置 ,是 测试 超 链 接 能 否 正确 工作 的 一 种 简便 方法 。 


2. 发 布 网 站 


如 果 网 站 顺利 通过 测试 , 则 可 以 着 手 进行 发 布 网 站 的 工作 。 但 在 发 布 之 前 ,首先 要 申 
请 域名 和 Web 服务 器 ,之 后 才能 将 网 站 上 传 到 服务 器 ,实现 全 球 范围 内 的 浏览 。 


3. 网 站 的 维护 


网 站 发 布 之 后 ,应 根据 访问 者 的 建议 ,不 断 修 改 和 更 新 网 站 中 的 信息 ,进一步 完善 网 
站 。 另 外 , 当 网 站 经 过 一 段 时 间 的 运转 ,还 需要 不 断 地 求 新 变化 ,丰富 网 站 的 实用 性 和 美 
观 性 。 


1.5 网 站 规划 案例 


1. 网 站 名 称 
XXX 学 校 XXX 社 团 网 站 
2. 网 站 建设 目标 


应 社团 需求 ,经 过 对 需求 的 分 析 整 理 , 一 致 认为 X XX 社 团 网 站 需要 建设 成 为 : 
。 方 使 浏览 者 即时 在 线 浏览 社团 信息 的 平台 ; 

。 建立 社团 网 上 良好 形象 .宣传 社团 ; 

。 利 于 学 生 、 学 校 ,社团 之 间 顺 畅 沟通 、 交 流 、 互 动 的 通道 ; 

。 利 于 管理 人 员 统 一 管理 信息 发 布 及 使 用 者 信息 的 平台 ; 

。 建立 社团 信息 和 社团 资源 的 网 上 共享 平台 。 


3. 目标 实现 要 求 


在 平台 设计 中 ,建议 强调 以 下 原则 。 
(1) 即时 性 。 访 问 者 能 够 即时 了 解 社团 最 新 动态 及 相关 信息 ;管理 人 员 能 够 快速 地 
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通过 管理 后 台 发 布 社团 信息 。 

(2) 实用 性 。 网 站 不 但 能 够 提供 一 个 信息 浏览 和 查询 的 平台 ,而 且 要 求实 现 社团 、 学 
校 交 流 、 互 动 的 平台 ,让 网 站 更 人 性 化 。 

(3) 易 用 性 。 功 能 易 用 ,界面 清晰 ,能 让 访问 者 以 最 快 的 速度 找到 所 需要 的 信息 及 内 
容 , 做 到 一 目 了 然 , 清 晰 明了 。 

(4) 安全 性 。 系 统 建设 需要 充分 考虑 到 社团 信息 的 保密 性 和 安全 性 ,尤其 在 数据 库 
设计 与 后 期 运行 中 采用 安全 有 效 的 方式 ,包括 实行 深度 防护 : 多 模块 操作 ,利用 分 散 的 防 
护 策略 来 管理 风险 ;失败 安全 保护 : 在 系统 运行 失败 时 有 相应 的 措施 保障 软件 安全 。 


4. 网 站 页 面 创意 设计 


网 站 页 面 是 社团 对 外 宣传 的 关键 部 分 ,是 树立 社团 形象 ,宣传 社团 文化 ,展示 社团 实 
力 的 必要 途径 。 

1) 首页 设计 

首页 是 社团 整体 形象 的 浓缩 ,要 进行 创意 设计 。 不 仅 要 美观 简洁 ,大 气 .专业 化 ,还 要 
体现 社团 的 形象 .社团 实力 。 

2) 内 页 设计 

内 页 设计 应 追求 在 风格 上 统一 ,但 又 要 因 内 容 不 同 而 各 有 特色 ,不 同 的 功能 页 面 又 将 
体现 出 和 功能 内 容 相 符 的 个 性 风格 。 

内 页 主要 用 来 实现 一 些 社团 宣传 性 内 容 , 而 这 些 内 容 更 新 不 会 很 频繁 。 


5. 网 站 栏目 介绍 


根据 以 上 分 析 , 结 合 社 团 自身 的 特点 ,将 网 站 主要 设计 为 以 下 几 个 模块 。 

一 级 栏目 : 包含 主页 .社团 简介 、 社 团 大 事 记 、 社 团 章程 .社团 专题 ,电子 杂志 、 谈 天 说 
地 ,二 手 交 易 等 栏目 。 

画 出 栏目 框架 图 ,如 图 1.6 所 示 。 
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主页 | | 社团 简介 | | 社团 大 事 记 | | 社团 章程 | | 社团 专题 | | 电子 杂志 | | 谈天 说 地 | | 二 手 交易 


关 | 社 [发 | 社 | 社 学 上 | 社 上 | 校 论 |[ 博 || 微 
F | 团 | 展 | 萝 | 团 校 || 彩 || 外 | ”| 坛 || 客 上 | 博 
社 | 文 | 历 | 环 | 视 风 上 | 缤 | 时 
团 | 化 | 程 | 境 | 频 采 || 纷 | 事 


图 1.6 网 站 栏目 框架 
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6. 技术 架构 图 
略 。 
7. 网 站 后 台 功 能 


网 站 的 新 闻 发 布 系统 ,栏目 设置 系统 .用户 管理 系统 、 文 章 搜索 系统 、 客 户 留 言 系 统 、 
社团 注册 系统 等 。 


这 些 模块 在 具体 实现 时 可 以 再 根据 需要 改动 ,模块 功能 介绍 略 。 
某 社团 网 站 首页 ,如 图 1.7 所 示 。 


上 握 假 乐 涡 宫 方 网 站 
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图 1.7 XXX 学 校 XXX 社 团 网 站 
8. 网 站 的 宣传 与 推广 
略 。 
本 章 小 结 


本 章 主要 介绍 了 网 站 规划 流程 、 网 站 规划 内 容 以 及 网 站 设计 的 原则 等 ,最 后 依据 所 讲 
内 容 撰 写 了 一 个 网 站 规划 方案 。 
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练 习 题 


(1) 什么 是 网 站 规划 ? 网 站 规划 的 流程 是 什么 ? 

(2) 网 站 规划 的 内 容 主 要 包括 哪些 方面 ? 

(3) 你 认为 网 站 设计 应 遵循 的 主要 原则 是 什么 ? 

(4) 浏览 Internet, 推 荐 两 个 优秀 网 站 ,并 分 析 该 网 站 的 优点 。 


上 机 实验 


1. 实验 要 求 


确定 某 一 个 行业 ,确定 该 行业 的 某 个 企业 (可 假设 或 实地 联系 企业 ) 为 目标 客户 ,充分 
了 解 企 业 的 需求 后 ,进行 网 站 规划 ,并 写 出 网 站 规划 书 。 


2. 背景 知识 
本 章 所 学 的 网 站 规划 的 相关 知识 。 
3. 实验 准备 工作 


保证 Internet 连接 畅通 ,学 生 主 机 安装 相应 的 网 页 设计 与 制作 软件 Dreamweaver、 
Fireworks、Flash 和 Photoshop 等 。 


4. 课时 安排 

上 机 实验 安排 2 课时 。 
5. 实验 指导 

略 。 


本 章 将 主要 介绍 在 开始 网 页 设计 之 前 需要 了 解 的 网 络 知 识 , 如 网 络 基本 概念 、 网 页 设 
计 与 制作 工具 HTML 语言 等 。 


【本 章 学 习 目 标 】 


。 了 解 与 网 络 相 关 的 基础 知识 ; 
。 了 解 网 页 设计 与 编辑 工具 ; 
。 掌握 HTML 语言 。 


2.1 Internet 基础 


2.1.1 Internet 概述 


Internet 是 相互 连接 的 网 络 集合 。 网 络 协议 是 网 络 中 的 设备 进行 通信 时 共同 遵循 的 
一 套 规 则 , 即 在 网 络 中 以 何 种 方法 获得 所 需 的 信息 。 

Internet 最 初 并 不 是 为 商业 性 和 广泛 使 用 而 设计 的 。 它 起 源 于 1969 年 美国 国防 部 
高 级 研究 计划 署 协助 开发 的 ARPANET。ARPANET 最 初 是 只 允许 国防 部 人 员 进 入 的 
封闭 式 网 络 。 到 1987 年 ,在 美国 国家 科学 基金 会 的 推动 下 ,ARPANET 从 之 前 的 主要 用 
于 军事 用 途 转向 科学 研究 和 民事 用 途 ,形成 了 今天 的 Internet 主干 网 难 形 NSFNET。 全 
球 网 络 的 发 展 是 空前 快速 且 出 人 意料 的 ,今天 ,查阅 电子 邮件 .访问 喜爱 的 网 站 等 活动 已 
融入 我 们 的 日 常生 活 。 

从 国内 Internet 的 发 展 历程 来 看 .1994 年 4 月 .中 国 科学 院 计 算 机 网 络 信 息 中 心 正 
式 接 入 Internet。 在 10 多 年 的 时 间 里 ,中 国 Internet 经 历 了 飞速 的 发 展 , 据 中 国 互联 网 络 
信息 中 心 (CNNIC) 发 布 第 30 次 (中 国 互联 网 络 发 展 状况 统计 报告 ) 中 显示 ,截至 2012 年 
6 月底, 我 国 网 民 数 量 达到 5. 38 亿 ; 此 外 ,网 站 数 、IP 地 址 等 也 迅速 增长 ,从 域名 、 网 站 数 、 
IP 地 址 等 增长 情况 来 看 ,我 国 互联 网 资源 得 到 了 全 面 提 升 。 

Internet 所 提供 的 服务 主要 是 WWW 、E-mail、FTP. 在 线 聊 天 、 网 上 购物 、 网 络 娱乐 
等 ,而 其 中 WWW 和 E-mail 是 最 常 使 用 的 服务 。 
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2.1.2 WWW 


通过 WWW(World Wide Web. 万 维 网 ) ,客户 端 只 要 通过 “浏览 器 "(Browser) 就 可 以 
非常 方便 地 访问 Internet 上 的 服务 器 端 ,迅速 地 获得 所 需 的 信息 ,如 图 2. 1 所 示 。 


HTTP 网 络 协议 


客户 端 


浏览 器 EC meme Web 服 务 器 


图 2.1 WWW 组 成 示意 图 


WWW 是 一 个 容纳 各 种 类 型 信息 的 集合 ,信息 主要 以 超 文本 标记 语言 (HTML) 编 写 
的 网 页 形式 分 布 在 世界 各 地 的 Web 服务 器 上 。 用 户 使 用 浏览 器 来 浏览 ,信息 以 网 页 的 形 
式 显 示 在 用 户 显 示 器 屏幕 上 。 浏 览 器 与 服务 器 之 间 的 信息 交换 使 用 超 文 本 传输 协议 
《HTITP)。 


2.1.3 网 页 与 网 站 


什么 是 网 页 ? 什么 是 网 站 ? 两 者 有 什么 样 的 联系 与 区 别 呢 ? 

构建 WWW 的 基本 单位 是 网 页 。 网 页 中 包含 所 谓 的 “ 超 链 接 ”, 通 过 已 经 定义 好 的 关 
键 字 和 图 形 , 只 要 用 鼠标 轻 轻 一 点 ,就 可 以 自动 跳 转 到 相应 的 其 他 文件 ,获得 相应 的 信息 ， 
实现 网 页 之 间 的 链接 ,从 而 构成 了 WWW 纵横 交织 的 网 状 结构 。 

通过 超 链 接连 接 起 来 的 一 系列 逻辑 上 可 以 视 为 一 个 整体 的 页 面 , 则 叫做 网 站 。 

网 站 的 概念 是 相对 的 ,大 的 网 站 如 新 浪 、 搜 狐 等 门户 网 站 ,页 面 非常 多 ,可 能 分 布 于 多 
台 服 务 器 上 ;小 的 网 站 如 一 些 个 人 网 站 ,可 能 只 有 几 个 页 面 , 仅 在 某 台 Web 服务 器 上 占据 
很 小 的 空间 。 

一 个 站 点 的 起 始 页 面 通常 被 称 为 “主页 "或 “首页 ”"。 主 页 /首页 是 一 个 网 站 的 开始 页 
面 ,因此 主页 /首页 的 好 坏 决 定 了 这 个 网 站 的 访问 情况 ,一 般 主页 /首页 的 名 称 是 固定 的 
index. htm、index. html 或 是 default. htm 等 。 


2.1.4 ”域名 与 IP 地 址 


在 Internet 上 的 每 台 网 络 设备 都 要 有 一 个 唯一 的 地 址 才能 被 访问 到 ,这 个 地 址 就 是 全 
地 址 。 目 前 多 使 用 的 全 协议 为 IPv4, 当 然 ,IPv6 协议 也 已 开始 使 用 ,不 久 将 取代 IPv4 协议 。 


1. IPv4 


按照 TCP/IP 协议 栈 中 的 IPv4 协议 规定 ,IP 地 址 由 32 位 的 二 进 制 数值 构成 。 将 这 个 
二 进 制 数值 分 成 4 组 ,每 组 8 位 ,转化 为 十 进 制 后 ,用 点 分 隔 表示 出 来 ,例如 202. 100. 4. 11， 
就 是 一 个 IP 地 址 。 

1) IP 地 址 结构 

IP 地 址 的 结构 分 为 “网 络 地 址 十 主机 地 址 ”。 同 一 网 络 上 的 所 有 设备 都 有 相同 的 网 
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络 地 址 ,比如 路 由 器 只 存储 每 一 个 网 段 的 网 络 地 址 (代表 了 该 网 段 内 的 所 有 主机 )。 常 用 
的 IP 地 址 分 为 A、B、C 三 类 ,如 图 2.2 所 示 。 


01 2 3 8 16 24 31 
A |0 网 络 号 主机 号 

0 和. 守 半 8 16 24 31 
B |I1|0 网 络 号 主机 号 

2 8 16 24 31 
C |1|1|0 网 络 号 主机 号 


图 2.2 IP 地 址 的 分 类 


(1) A 类 地 址 的 前 8 位 代表 网 络 地 址 ,后 3 个 8 位 代表 主机 地 址 。A 类 地 址 的 范围 
为 1. 0.0.0 一 126. 255. 255.255。A 类 地 址 用 于 超大 型 的 网 络 , 能 容纳 1600 多 万 台 主 机 。 

(2) B 类 地 址 的 前 2 个 8 位 代表 网 络 地 址 ,后 2 个 8 位 代表 主机 地 址 ,B 类 地 址 的 范 
围 为 128. 0.0.0 一 191. 255. 255. 255。B 类 地 址 一 般 用 于 中 等 规模 的 网 络 ,能 容纳 6 万 多 
台 主 机 。 

(3) C 类 地 址 的 前 3 个 8 位 代表 网 络 地 址 ,后 8 位 代表 主机 地 址 。C 类 地 址 的 范围 为 
192.0. 0.0 一 223.255. 255. 255,C 类 地 址 一 般 用 于 小 型 网 络 , 仅 能 容纳 256 台 主 机 。 

2) 特殊 的 IP 地 址 

(1)“127” 开 头 的 IP 地 址 ,用 于 回路 测试 ,如 127. 0. 0. 1 可 以 代表 本 机 IP 地 址 ,用 
“http://127.0.0.1” 就 可 以 测试 本 机 中 配置 的 Web 服务 器 。 

(2) IP 地 址 为 0. 0. 0. 0 对 应 于 当前 主机 ;IP 地 址 为 255. 255. 255. 255 是 当前 子 网 的 
广播 地 址 。 

(3) 公有 IP 和 私有 IP。 

公有 地 址 (Public Address) 由 Inter NIC( 因 特 网 信息 中 心 ) 负 责 。 这 些 IP 地 址 分 配 
给 注册 并 向 Inter NIC 提出 申请 的 组 织 机 构 , 通 过 它 直 接 访问 Internet。 

私有 地 址 (Private Address) 属 于 非 注 册 地 址 ,专门 为 组 织 机 构 内 部 使 用 。 以 下 列 出 
留用 的 内 部 私有 地 址 : 

A 类 10.0.0.0~10.255.255.255 

B 类 172.16.0.0~172. 31. 255. 255 

C 类 ”192.168.0.0 一 192. 168. 255. 255 


2. IPv6 


随 着 互联 网 的 迅速 发 展 ,IPv4 定义 的 有 限 地 址 空间 将 被 耗 尽 ,地 址 空间 的 不 足 必 将 
妨碍 互联 网 的 进一步 发 展 。 为 了 扩大 地 址 空间 ,通过 IPv6 重新 定义 地 址 空间 。IPv6 采 
用 128 位 地 址 长 度 ,几乎 可 以 不 受 限 制 地 提供 地 址 。 在 IPv6 的 设计 过 程 中 除 解决 了 地 址 
短缺 问题 以 外 ,还 考虑 了 在 IPv4 中 解决 不 好 的 其 他 一 些 问 题 ,主要 有 端 到 端 IP 连接 、 服 


BW | 第 = 章 网 络 与 网 页 设计 基础 知识 ] 人 


务 质量 (QoS) 安全 性 、 多 播 , 移 动 性 . 即 插 即 用 等 (有 兴趣 的 读者 可 查阅 相关 网 络 技术 方 
面 的 参考 书籍 ) 。 


3. 域名 的 分 类 


IP 地 址 是 一 串 难 以 记忆 的 数字 ,因此 从 1985 年 开始 就 引入 了 域名 的 概念 ,用 具有 含 
义 的 字符 来 表示 网 络 中 的 主机 ,以 便于 浏览 者 访问 。 通 过 DNS 域名 解析 系统 将 域名 解析 
到 相应 的 IP 地 址 上 ,域名 与 IP 地 址 之 间 为 对 应 关系 。 

域名 系统 是 一 个 分 层 的 树 状 结构 组 织 , 如 图 2. 3 所 示 , 最 上 层 是 一 个 无 名 的 根 域 , 下 
层 为 顶级 域名 ,接着 是 二 级 域名 …… 

顶级 域名 的 分 类 有 两 种 : 一 种 是 按 组 织 机 构 进 行 分 类 , 另 一 种 是 按 国家 和 地 区 进行 
分 类 ,如 图 2. 3 所 示 。 


根 域 
人 a fT 了 
上 按 组 织 机 构 划分 ! 按 国家 和 地 区 划分 | 
I | 
上 1 1 1 
| com net org! ljp cn ca 
人 于 共和 
ibm hp yahoo com edu net 
sina ebay alibaba 
图 2.3 域名 结构 


美国 采用 以 组 织 机 构 分 类 的 形式 ,而 其 他 国家 按 地 理 划 分 来 分 类 ,用 代表 国家 或 地 区 的 
缩写 作为 顶级 域名 。 中 国 国内 域名 由 中 国 互联 网 信息 中 心 控制 ,网 址 为 www. cnnic. net. cn。 
按 组 织 分 类 的 顶级 域名 见 表 2. 1 , 按 地 理 区 域 分 类 的 顶级 域名 见 表 2. 2。 


表 2.1 按 组 织 分 类 的 顶级 域名 


域 名 域名 机 构 新 增 域 名 域名 机 构 
com 商业 机 构 biz 商务 域名 
edu 教育 机 构 ce 公司 域名 
gov 政府 部 门 Tel 名 片 域名 
Int 国际 性 机 构 Info 信息 域名 
mil 军队 name 姓名 域名 
net 网 络 机 构 tv 媒体 域名 
org 非 营 利 机 构 mobi 手机 域名 


表 2.2 按 地 理 区 域 分 类 的 项 级 域名 


域 名 家 和 地 区 全 称 域 名 国家 和 地 区 全 称 
cn 中 国 China ru 俄罗斯 Russia 
ca 加 拿 大 Canada tw 中 国 台湾 Taiwan 
jp 日 本 Japan hk 中 国 香港 Hong Kong 
kr 韩国 Korea us 美国 United States 


域名 的 书写 格式 为 : 叶 节 点 名 . 二 级 域名 . 顶级 域名 。 例 如 : www. sohu. com, www 
表示 Web 服务 器 名 ,sohu 表示 企业 名 称 ,com 表示 顶级 域名 。 


2.2 网 页 设计 与 制作 工具 


目前 网 页 制作 工具 较 多 ,大 多 数 网 页 的 制作 都 是 通过 “所 见 即 所 得 ”的 编辑 工具 完成 
的 。 在 网 页 制作 过 程 中 ,还 需要 通过 图 形 和 动画 设计 工具 进行 素材 的 创作 和 加 工 。 


2.2.1 网 页 编辑 工具 


网 页 编辑 工具 主要 分 为 标记 型 和 所 见 即 所 得 型 。 标 记 型 工具 常用 的 是 Notepad( 记 
事 本 )、Ultraedit 等 。Ultraedit 是 一 套 很 好 用 的 文本 编辑 器 , 附 有 HTML 标签 颜色 显示 、 
搜寻 替换 以 及 无 限制 的 还 原 功能 。 

所 见 即 所 得 型 的 编辑 主流 软件 有 微软 的 FrontPage 和 Adobe 公司 的 Dreamweaver。 
FrontPage 继承 了 Office 系列 软件 的 界面 通用 、 操 作 简单 的 特点 ,十 分 适合 初学 者 使 用 。 

但 FrontPage 与 Adobe 公司 的 Dreamweaver 相 比 ,在 HTML 源 代码 的 精确 性 、 实 用 性 
以 及 对 各 种 新 技术 的 支持 上 都 略 逊 一 筹 。 本 书 主要 介绍 的 网 页 编辑 工具 是 Dreamweaver。 


2.2.2 图形 和 图 像 处 理工 具 


目前 常用 的 图 形 和 图 像 处 理工 具 主 要 是 Adobe 公司 出 品 的 著名 的 图 形 图 像 处 理 软 
件 Photoshop 和 Fireworks。 

Photoshop 的 功能 十 分 强大 ,是 目前 使 用 最 为 广泛 的 专业 图 形 图 像 处 理 软件 之 一 。 
它 捆绑 了 Image Ready, 能 够 实现 各 种 专业 化 的 图 像 处 理 及 动画 的 制作 等 。 本 书 在 后 面 
章节 将 会 对 Photoshop 的 使 用 加 以 介绍 。Photoshop 的 工作 界面 如 图 2. 4 所 示 。 

Fireworks 是 首选 Web 图 形 图 像 处 理 软件 。 它 的 独特 之 处 在 于 能 够 优化 处 理 大 图 
片 . 切 制图 片 、 为 图 片 加 入 特殊 效果 、 制 作 网 页 的 动态 行为 等 ,可 以 生成 Fireworks 
HTML ,直接 导 入 到 网 页 中 ,使 用 非常 方 使 。 本 书 将 在 以 后 的 章节 加 以 详细 介绍 。 


2.2.3 动画 设计 工具 


Flash 是 目前 网 页 制作 中 最 为 出 色 的 动画 设计 软件 , 它 是 一 种 交互 式 动画 设计 工具 ， 
用 它 可 以 将 音乐 ,声效 \ 动 画 以 及 富有 新 意 的 界面 融合 在 一 起 ,以 制作 出 高 品质 的 网 页 动 
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图 2.4 ”Photoshop 工作 界面 


态 效果 。Flash 所 使 用 的 图 形 是 压缩 的 矢量 图 形 , 采 用 了 网 络 流 式 媒体 技术 ,突破 了 网 络 
带宽 的 限制 ,可 以 边 下 载 边 播放 ,这 样 即 避免 了 用 户 长 时 间 的 等 待 ,设计 者 可 以 随心 所 和 欲 
地 设计 出 高 品质 的 动画 。Flash 已 经 慢 慢 成 为 网 页 动画 的 标准 ,成 为 一 种 新 兴 的 技术 发 
展 方向 。 本 书 将 在 以 后 的 章节 加 以 详细 介绍 。 


2.3 HTML 语言 


网 页 的 本 质 是 超 文本 标记 语言 HTML。 超 文本 使 网 页 之 间 具 有 跳 转 能 力 ,使 浏览 者 
可 以 选择 阅读 路 径 。 

使 用 HTML 编写 的 Web 页 面 称 为 HTML 文件 ,这 种 文件 一 般 以 . html 或 者 . htm 
为 扩展 名 ,使 用 网 页 编辑 工具 创建 HTML 文件 。 
2.3.1 HTML 语法 结构 


HTML 文件 的 所 有 控制 语句 称 为 标签 ,标签 在 一 对 尖 括 号 之 间 , 格 式 如 下 : 
< 标签 >HTML 语言 元 素 < /标签 > 


标签 分 为 成 对 标签 和 非 成 对 标签 ,例如 二 table 之 … 一 /table> ,而 一 br>、 一 hr 等 
属于 非 成 对 标签 。 标 签 忽略 大 小 写 ,书写 格式 非常 灵活 。 可 使 用 标签 的 属性 来 进一步 限 
定 标签 ,一 个 标签 可 以 有 多 个 属性 项 ,各 属性 项 的 次 序 不 限定 ,各 属性 项 之 间 用 空格 来 进 
行 分 隔 。 例 如 : 


<img src="images/girl.gif" width="100" height="87"> 
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HTML 中 使 用 的 注释 语句 为 

<!-- 注 释 内 容 --> 

注释 内 容 可 插入 HTML 代码 中 任何 位 置 ,注释 内 容 不 会 显示 在 网 页 中 。 例 如 : 
< !-- 我 是 有 名 的 网 页 设计 大 师 ,看 我 做 的 网 站 是 不 是 非常 漂亮 ?- -> 

【 例 2.1】 一 个 简单 的 HTML 文件 如 下 。 运 行 结果 如 图 2. 5 所 示 。 


<html><head> 
<meta http-equiv="Content- Type" content= "text/html; charset=gb2312"> 
<title> 带 你 进入 网 络 世界 < /title>< /head> 
<body> 
<hl>Dreamweaver CS5 带 你 进入 网 络 世界 </hl> 
<h2> 你 准备 好 了 吗 ? < /h2> 
<p><img src="bigmap.gif" width="370" height="235" border="0"></p> 
<p><a href="http://www.adobe.com"> 网 页 三 剑客 < /a>< /p> 
</body> 
</html> 


带 你 进入 网 络 世界 - Vindors Internet Explorer 


GO er aera lx rm = 


训 收 天 。 友基 你 注入 网 世界 从 -有 目 - 口 二- 中- ” 


人 


图 2.5 简单 的 网 页 实例 


2.3.2 常见 的 HTML 标签 
1. <html>…</html> 
此 标签 用 于 标识 HTML 文件 的 开始 与 结束 。 中 间 是 一 些 HTML 语言 的 元 素 , 它 允 


第 2 章 网 络 与 网 页 设计 基础 知识 


© 


许 浏 览 器 把 文件 内 容 确认 为 HTML 文件 。 
2. <head>…=/head> 


此 标签 为 头 部 标签 ,其 中 的 信息 不 会 出 现在 网 页 中 。 但 其 中 包含 了 许多 网 页 的 属性 
信息 ,例如 网 页 的 题目 、 关 键 词 . 说 明 、 网 页 类 型 和 语言 内 码 等 。 

(1) 过 title 二 … 达 /title 二 : 标题 标签 。 网 页 的 标题 将 会 显示 在 浏览 器 的 标题 栏 上 。 

(2) 二 meta… 二 : meta 标签 。 包 括 了 MIME 字符 集 信息 、 网 页 关键 字 、 网 页 说 明 信 
息 等 ,这 些 信息 有 助 于 网 站 的 推广 。 


3. <body>…<=/body> 


此 标签 为 主体 标签 , 它 是 文档 的 主干 ,包含 了 文档 的 内 容 ,可 以 通过 多 种 途径 来 表现 这 
些 内 容 。 对 于 可 视 浏 览 器 ,可 以 把 主体 想象 成 一 张 画布 ,在 画布 上 出 现 文字 、 图 像 .视频 等 。 

(1) 二 p 盖 …</p>: 段落 标签 ,中 间 是 一 段 文字 的 内 容 ,可 以 设置 其 属性 来 对 文字 
进行 排版 。 

(2) 一 font 二 … 到 /font>: 字体 标签 ,可 通过 设置 其 属性 来 美化 字体 。 

(3) 过 hz>… 过 /hz>: 标题 标签 ,n 的 取 值 从 1 一 6, 即 标题 1 标题 2、…、 标 题 6。 

(4) 二 img 二 : 图 像 标 签 , 设 置 网 页 中 图 像 的 来 源 、 尺 寸 、 对 齐 方式 和 说 明 等 。 

(5) 二 a 二 … 二 /a 二 : 超 链接 标签 ,设置 超 链接 的 链接 路 径 和 链接 目标 等 。 

(6) 二 table 二 … 二 /table 二 : 表格 标签 ,通过 表格 可 以 对 网 页 中 的 其 他 元 素 进行 排 
版 。 构 成 表格 标签 的 基本 标签 有 以 下 几 种 。 

OO 一 caption 二 … 一 /caption 二 : 表格 标题 标签 ,定义 表格 的 标题 。 

@ 二 tr 二 … 达 /tr 二 : 表格 的 行 标签 ,定义 表格 中 的 一 行 。 

@ 去 td>>… 去 /td>: 表格 的 单元 格 标签 ,定义 表格 行 中 的 一 个 单元 格 。 

@ 二 th 二 … 达 /th 二 : 表 头 的 单元 格 标签 ,定义 表格 内 的 表 头 单元 格 。 

读者 如 想 了 解 更 多 的 信息 ,可 查阅 HTML 相关 书籍 进行 研究 和 学 习 。 


本 章 小 结 


本 章 主 要 介绍 了 如 下 内 容 。 

(1) 网 络 基础 知识 : 

。 Internet 的 起 源 与 发 展 、 国 内 Internet 的 发 展现 状 ; 

。 WWW 的 概念 .WWW 的 访问 方式 及 网 络 协议 ; 

。 域名 及 IP 地 址 的 概念 ,域名 和 IP 地址 之 间 的 关系 。 

(2) 网 页 制作 工具 ,包括 网 页 编辑 工具 、 图 像 及 动画 制作 工具 。 
(3) HTML 语言 概述 。 
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(1) 什么 是 Internet? 叙述 Internet 的 产生 与 发 展 。 

(2) 什么 是 WWW? 如 何 访问 WWW? 

(3) IP 地 址 与 域名 之 间 的 关系 如 何 ? 

(4) HTML 文件 中 的 标签 是 否 区 分 大 小 写 ? 格式 有 无 严格 要 求 ? 


上 机 实验 
1. 实验 要 求 


(1) 打开 浏览 器 ,浏览 某 个 网 页 ,查看 其 源 代码 ,了 解 HTML 代码 的 含义 。 

(2) 打开 记事 本 ,试用 HTML 语言 编写 一 个 简单 的 网 页 ,网 页 中 要 包含 以 下 内 容 : 
网 页 标题 文字、 图 像 表 格 、 超 链接 等 。 

(3) 上 网 浏览 不 同 的 电子 商务 网 站 ,比如 淘宝 网 、 当 当 网 等 ,分 析 站 点 结构 、 站 点 风格 
及 网 页 配色 等 , 写 出 网 站 分 析 报 告 。 

2. 背景 知识 


利用 已 经 掌握 的 前 导 课程 的 网 络 知 识 和 本 章 所 学 习 的 HTML 语言 的 知识 ,来 编写 
简单 网 页 的 源 代码 ,浏览 网 站 并 分 析 网 站 的 特点 。 


3. 实验 准备 工作 


保证 Internet 连接 畅通 ,学 生 主 机 安装 相应 的 网 页 设计 与 制作 软件 Dreamweaver、 
Fireworks、Flash 和 Photoshop 等 。 


4. 课时 安排 
上 机 实验 安排 1 课时 。 
5. 实验 指导 


(1) 如 何 查 看 网 页 源 代码 ? 

打开 浏览 器 ,选择 “查看 ”菜单 一 “ 源 文件 ”命令 。 

(2) 如 何 编写 HTML 代码 ? 

打开 记事 本 ,手工 编写 HTML 代码 ,注意 HTML 代码 的 编写 顺序 及 网 页 元 素 对 应 
的 标签 。 保 存 网 页 时 ,网 页 的 扩展 名 为 . html 或 . htm。 


本 章 将 主要 介绍 Dreamweaver CS5 的 主要 功能 、 工 作 界面 及 各 个 面板 的 用 途 等 。 
【本 章 学 习 目 标 】 


。 了 解 Dreamweaver CS5 工作 界面 的 组 成 ; 

。 掌握 Dreamweaver CS5 常用 的 工具 面板 和 工具 栏 的 功能 等 ; 
。 掌握 管理 站 点 的 方法 ,创建 本 地 站 点 、 编 辑 站 点 

。 了 解 如 何 将 本 地 站 点 信息 上 传 远程 站 点 。 


3.1 _ Dreamweaver CS5 的 工作 界面 


Dreamweaver 是 集 网 页 制作 和 网 站 管理 于 一 身 的 网 页 制作 软件 , 它 是 专门 为 网 页 设 
计 师 量 身 订 制 的 可 视 化 网 页 制作 软件 ,利用 它 可 以 方便 ,快捷 地 制作 跨 平台 和 跨 浏 览 器 的 
动感 网 页 。 


1. 工作 界面 一 览 


Dreamweaver CS5 的 工作 界面 由 菜单 栏 “ 插 入 ” 栏 ,文档 窗口 “文档 ”工具 栏 \ 状 态 
栏 “ 属 性 ”面板 、 工 作 面 板 组 等 组 成 ,如 图 3. 1 所 示 。 
2.“ 插 入 ” 栏 


“插入 ” 栏 包含 用 于 创建 网 页 对 象 ( 如 表格 、 层 和 图 像 等) 的 功能 按钮 。 这 些 按钮 被 分 
类 组 织 到 各 个 选项 卡 中 ,如 图 3.2 所 示 。 当 鼠标 指针 移动 到 一 个 按钮 上 时 ,会 出 现 一 个 工 
具 提 示 , 其 中 含有 按钮 的 名 称 , 若 按钮 劳 有 一 个 向 下 的 黑色 箭头 , 它 就 是 一 个 按钮 组 , 单 击 
可 选择 不 同 的 按钮 ,执行 不 同 的 命令 (插入 栏 可 纵向 或 横向 排列 ) 。 


3. 菜单 栏 


菜单 栏 提 供 了 程序 功能 的 选项 命令 ,可 以 通过 菜单 栏 中 的 命令 完成 某 项 特定 操作 ,如 
图 3.3 所 示 。 


“插入 ” 栏 工作 面板 组 


门 给 86 形 热点 
D 结 和 懈 因 执 点 
了 综 制 多 边 形 热点 


图 3.2 “插入 " 栏 


图 3.3 菜单 栏 
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4.“ 文 档 ” 工 具 栏 


“文档 ”工具 栏 中 主要 包含 了 一 些 对 文档 进行 常用 操作 的 功能 按钮 ,可 在 文档 的 不 同 
视图 间 进 行 快速 切换 :“ 代 码 ” 视 图 “设计 ”视图 以 及 同时 显示 “代码 ”和 “设计 ”视图 的 “ 拆 
分 ”视图 等 。“ 文 档 " 工 具 栏 中 还 包含 一 些 与 查看 文档 在 本 地 和 远程 站 点 间 传输 文档 有 关 
的 常用 命令 和 选项 ,如 图 3.4 所 示 。 

同时 显示 “代码 ” 


和 "设计 "视图 fe 预览 “刷新 
| 


| 
Ti [+ 专 WERE 


人 显示 “设计 "视图 可 视 化 助理 网 页 标题 文件 管理 


图 3.4 “文档 "工具 栏 


5. 文档 窗口 


通过 文档 窗口 可 以 显示 ,创建 和 编辑 当前 文档 ,可 以 在 “设计 ”视图 “代码 ”视图 或 “ 拆 
分 ?视图 中 查看 和 编辑 文档 。 

文档 窗口 的 状态 栏 位 于 文档 窗口 的 底部 ,作用 是 提供 与 用 户 正 编辑 的 文档 有 关 的 某 
些 信息 ,如 当前 窗口 大 小 、 文 档 大 小 和 估计 下 载 时 间 等 ,如 图 3.5 所 示 。 


| 4 RO He | 
国 区 
代码" 
视图 “设计 "视图 
拆 分 "视图 
标签 选择 器 状态 栏 
| EN 


图 3.5 文档 窗口 


6.“ 属 性 ”面板 


“属性 ”面板 并 不 是 将 所 有 的 属性 加 载 在 面板 上 .而 是 根据 所 选择 的 对 象 来 动态 显示 
对 象 的 属性 .“ 属 性 ?面板 的 状态 完全 是 随 当前 在 文档 中 所 选择 的 对 象 来 确定 的 。 例 如 ， 
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当前 选择 了 一 幅 图 像 ,那么 “属性 ?面板 上 就 出 现 该 图 像 的 相关 属性 ,如 果 选 择 了 表格 , 则 
“属性 ”面板 会 相应 地 变化 成 表格 的 相关 属性 ,如 图 3.6 所 示 。 


属性 

《> 1mm | 格式 四 | 及 千 回 并 | 无 BI 王 汪 下 二 村 [| 
bcss DD [无 ~ 链接 UL) YD 有 标 @ 

中 单元 格 。 水 平台 | 默认 YD 不 执行 0) 口 。 青 景 大 色 (6) 厂 -| 页 面 原 性 
一 口头 天 让 四 从 > 高 0 标题 EE) 口 


3.6 “属性 ”面板 


注意 : 当 对 文本 、 单 元 格 等 多 种 网 页 元 素 进行 属性 设置 时 ,“ 属 性 ”面板 中 有 两 个 选 
项 : HTML 和 CSS, 若 选择 HTML 标签 ,设置 的 属性 是 基于 HTML 标签 的 ; 若 选择 CSS 
标签 ,设置 的 属性 则 是 基于 CSS 样式 的 。 


3.2 定义 本 地 站 点 


在 Dreamweaver 中 ,“ 站 点 ”一 词 既 表示 Web 站 点 ,又 表示 属于 Web 站 点 的 文档 的 本 
地 存储 位 置 。 也 就 是 说 ,在 开始 构建 Web 站 点 之 前 ,需要 建立 站 点 文档 的 本 地 存储 位 置 。 
Dreamweaver 站 点 可 组 织 与 Web 站 点 相关 的 所 有 文档 ,跟踪 和 维护 链接 、 管 理 文件 、 共 
享 文件 以 及 将 站 点 文件 传输 到 Web 服务 器 上 。 

要 制作 一 个 能 够 被 大 家 浏览 的 网 站 ,首先 需要 在 本 地 磁盘 上 制作 站 点 。 放 置 在 本 地 
磁盘 上 的 网 站 被 称 为 本 地 站 点 ,传输 到 位 于 互联 网 Web 服务 器 里 的 网 站 被 称 为 远程 站 
点 。Dreamweaver CS5 提供 了 对 本 地 站 点 和 远程 站 点 强大 的 管理 功能 。 因 而 ,应 用 
Dreamweaver CS5 不 仅 可 以 创建 单独 的 文档 ,还 可 以 创建 完整 的 Web 站 点 。 


3.2.1 创建 并 管理 站 点 


在 Dreamweaver CS5 中 可 以 有 效 地 建立 并 管理 多 个 站 点 。 
在 创建 站 点 前 ,应 先 在 本 地 硬盘 上 建 一 个 以 英文 或 数字 命名 的 空 文件 夹 。 例 如 ,在 DD 
盘 新 建 了 一 个 文件 夹 myweb, 并 在 此 文件 夹 中 建立 子 文件 夹 images, 用 于 存放 图 像素 材 ， 


然后 再 创建 本 地 站 点 。 
方法 一 ”启动 Dreamweaver CS5 ,选择 “站 点 ”菜单 “新建 站点” 命令。 
方法 二 


(1) 选择 “窗口 "菜单 一 “文件 ”命令 (快捷 键 F8) ,打开 “文件 ”面板 ,选择 “站 点 ”选项 ， 
单 击 下 拉 列 表 框 中 的 “管理 站 点 ”选项 ,如 图 3.7(a) 所 示 , 打 开 “ 管 理 站 点 ”对 话 框 ,如 
图 3.7(b) 所 示 。 在 该 对 话 框 中 ,可 以 新 建站 点 ,也 可 以 编辑 ,复制 .删除 站 点 、 导 入 /导出 
站 点 ,实现 对 站 点 的 管理 操作 。“ 管 理 站 点 ”对 话 框 也 可 以 通过 选择 “站 点 ”菜单 “管理 站 

点 ”命令 打开 。 这 里 ,在 “管理 站 点 "对话 框 中 单 击 “ 新 建 ?按钮 。 

(2) 在 弹出 * 站 点 设置 对 象 未 命名 站 点 1” 对 话 框 左 侧 , 有 “站 点 ”、“ 服 务 器 ”版 本 控 
制 " 和 “高 级 设置 ”四 个 选项 卡 ,可 以 在 这 些 选项 卡 之 间 切 换 , 对 新 建站 点 属性 进行 设置 。 
如 图 3.8 所 示 。 
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设置 对 象 未 命名 站 点 1 


Dreamweaver 站 点 是 网 站 中 使 用 的 所 有 文件 和 资源 的 集合 。 Dreamweaver 
站 点 通常 包含 两 个 部 分 ; 可 在 其 中 存 侍 和 处 理 文件 的 计算 机 上 的 本 地 文件 
夹 ， 以 及 可 在 其 中 将 相同 文件 : Web 上 的 服务 器 上 的 远程 文件 去 
您 可 以 在 此 处 为 Dreamweaver 站 点 记 择 本 地 文件 夫 和 名 称 。 
站 点 名 称 : [未 命名 站 点 1 
本 地 外 点 文件 惧 ; [C:\Documents and Settngs\E141Chen\My Documentsl 未 全 


图 3.8 站 点 设置 


(3) 选择 “站 点 ”选项 卡 ,在 “站 点 名 称 ” 文 本 框 中 ,输入 一 个 站 点 名 字 用 于 在 Dreamweaver 
中 标识 该 站 点 。 这 个 名 字 可 以 是 任何 用 户 需要 的 名 字 ( 建 议 不 使 用 汉字 命名 ), 此 处 输入 
“myweb”, 并 在 “本 地 站 点 文件 夹 "文本 框 中 设置 站 点 目录 文件 夹 ,如 图 3.9 所 示 。 


服务 器 全 的 由 的 二 的 二 
版 本 以 制 EE ih 


高 级 设置 _ 


您 可 以 在 此 处 为 Dreamweaver 站 点 选择 本 地 文件 赤 和 名 称 。 
站 点 名 称 : [myweb 
本 地 站 点 文件 夫 : [D:myweb\ 所 


图 3.9 站 点 命名 和 设置 站 点 路 径 
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(4) 选择 “高 级 设置 "选项 卡 切换 至 “高 级 设置 "界面 ,如 图 3. 10 所 示 。 设 置 “默认 图 
像 文 件 夹 ”为 D:\myweb\images( 注 意 ; 图 像 文件 夹 应 包含 在 站 点 目录 文件 夹 中 ),“ 链 接 
相对 于 ”选择 “文档 ”选项 ,Web URL 可 不 填 。 


划 
昧 认 图 委 文 从: [DimmeD Wages 它 
链 失 于: 文档 。。 吕 站 点 根 目录 
| Web URL: | http:// 

[3 人 奔 共 人 Web URL。 加 更 已 应 义 滞 亩 
设计 备注 如，Dyeamwesarer 郊 北 历 属 旗 群 认可 办 桩 定 的 Web URL。 
文件 视图 列 
Contnbute 口 区 分 大 小 写 的 机 接 检查 
本 蔬 启用 组 存 


Spy 


当 闻 沁 保 冯 才 对 成 尖 脱 广 从 向 医 者 他 多 ， 二 演 各 纺 贡 可 面 儿 说 
癌 信 区 太 由 居 的 壮 民 


图 3.10 设置 “默认 图 像 文件 夹 ” 


(5) 选择 “服务 器 ”选项 卡 ,如 图 3. 11 所 示 , 单 击 * 添 加 新 服务 器 ”按钮 ,将 弹出 一 个 设 
置 新 服务 器 基本 属性 和 高 级 属性 的 对 话 框 , 如 图 3. 12 所 示 。 


您 将 在 此 位 置 选择 承载 Web 上 的 页 面 的 服务 器 。 此 对 话 杠 的 设置 来 自 
版 本 控制 Internet 服务 提供 商 (1SP) 或 Web 管理 只。 


此 并 :要 开 咎 这 Dreamweaver 半 席 上 工作 ， 低 无 再 让 二 岂 步 时 ， 如 棵 大 间 氏 天 We 闪 发 
本 地 信息 EZ 

E73 

设计 备 主 
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3.11 添加 新 服务 器 


(6) 单 击 “ 基 本 ”标签 ,打开 “基本 ”选项 卡 。 在 “服务 器 名 称 ” 文 本 框 中 输入 指定 服务 
器 的 名 称 ,这 里 为 myweb。“ 连 接 方法 "选择 FTP; 

在 “FTP 地 址 ”文本 框 中 ,输入 要 将 本 地 站 点 文件 上 传 到 远程 FTP 服务 器 的 地 址 ， 
FTP 地 址 是 计算 机 系统 的 完整 Internet 名 称 (注意 : 如 果 不 知 道 FTP 地 址 ,请 与 Web 服 
务 器 提供 商 联 系 ) 。 

端口 21 是 接收 FTP 连接 的 默认 端口 .如 要 修改 默认 端口 号 ,可 在 “端口 " 右 侧 的 文本 


| [第 3 章 创建 站 点 ] 人 


| sa 和 


全 芝 开 Web 并 玉 


轨 到 | 


图 3.12 设置 服务 器 属性 


框 中 更 改 。 保 存 更 改 设置 后 ,“FTP 地 址 ”的 结尾 将 附加 上 一 个 冒号 和 新 的 端口 号 ; 

在 “用 户 名 ”和 “密码 "文本 框 中 ,输入 用 于 连接 到 FTP 服务 器 的 用 户 名 和 和 密码 。 单 
击 “ 测 试 ?按钮 ,测试 FTP 地 址 .用户 名 和 密码 ; 

在 “ 根 目录 ”文本 框 中 ,输入 远程 服务 器 上 用 于 存储 公开 显示 的 文档 的 目录 。 

注意 : 如 果 不 能 确定 根 目 录 , 请 与 服务 器 管理 员 联 系 或 将 文本 框 保留 为 空白 。 在 有 
些 服务 器 上 , 根 目 录 就 是 您 首次 使 用 FTP 连接 到 的 目录 。 若 要 确定 这 一 点 ,请 连接 到 服 
务 器 ,如 果 出 现在 "文件 ”面板 “远程 服务 器 ”视图 中 的 文件 夹具 有 像 public_html、www 或 
您 的 用 户 名 这 样 的 名 称 , 它 可 能 就 是 您 应 该 在 “ 根 目录 ”文本 框 中 输入 的 目录 。 

在 Web URL 文本 框 中 ,输入 Web 站 点 的 URL 地 址 。Dreamweaver 使 用 Web 
URL 创建 站 点 根 目录 相对 链接 ,并 在 使 用 链接 检查 器 时 验证 这 些 链 接 。 

(7) 单 击 “ 高 级 "标签 ,打开 “高 级 ”选项 卡 ,如 图 3. 13 所 示 , 对 “远程 服务 器 ”和 “测试 
服务 器 ”进行 设置 。 

如 果 希 望 自动 同步 本 地 和 远程 文件 ,请 选中 “维护 同步 信息 ” 复 选 框 ;如 果 希 望 在 保存 
文件 时 Dreamweaver 将 文件 上 传 到 远程 站 点 ,请 选中 “保存 时 自动 将 文件 上 传 到 服务 器 ” 
复 选 框 ;如 果 和 希望 激活 “ 存 回 /取出 ”系统 ,请 选中 “启用 文件 取出 功能 " 复 选 框 ;如 果 使 用 的 
是 测试 服务 器 ,请 从 “服务 器 模型 "列表 框 中 选择 一 种 服务 器 模型 。 最 后 , 单 击 “ 保 存 ” 按 钮 
结束 站 点 的 创建 。 


3.2.2 ”创建 网 页 
在 完成 创建 站 点 之 后 ,就 可 以 创建 网 页 了 。 
1. 新 建 网 页 
在 Dreamweaver 中 ,创建 网 页 的 方法 很 多 ,此 处 介绍 以 下 三 种 方法 。 


Cay 网 站 规划 与 网 页 设计 思量 时 轩 时 二 和 二 


| [一 
版 本 控制 运程 服务 器 
高 名 设置 加 维护 同步 信息 
— S| 口 保存 时 自动 特 文件 上 传 到 服务 器 
ET 口 自用 文件 如 出 功能 
文件 视图 列 回 打开 文件 之 前 取出 
Contribute 
针 职 出 名 称 : 
sm 电子 邮件 地 址 : 
测试 服务 器 
服务 器 模 型: [A jovenpt 1z] 


图 3.13 设置 高 级 服务 器 属性 


方法 一 ”打开 “文件 ”面板 ,在 站 点 的 根 文 件 夹 下 右 击 ,在 弹出 的 快捷 菜单 中 选择 “新 
建文 件 ” 命 令 。 

方法 二 ”启动 Dreamweaver 后 ,窗口 中 会 出 现 一 个 启动 界面 , 单 击 * 新 建 " 下 方 的 
HTML 选项 , 即 可 创建 网 页 ,如 图 3. 14 所 示 。 


打开 最 近 的 项 目 新 奸 
© 打开 司 HM 


图 3.14 利用 启动 界面 创建 网 页 


方法 三 ”选择 “文件 ”菜单 一 “新 建 "命令 ,弹出 “新 建文 档 ” 对 话 框 ,如 图 3. 15 所 示 。 
打开 “空白 页 ”选项 卡 ,在 “页 面 类 型 "选项 组 中 选择 HTML 选项 ,再 在 相应 的 “布局 ”选项 
组 中 选择 某 项 , 单 击 “ 创 建 " 按 钮 , 即 可 创建 网 页 ,默认 名 称 为 Untitled-1。 


2. 保存 网 页 


网 页 在 编辑 过 程 或 编辑 完成 后 ,要 及 时 保存 。 用 户 可 选择 “直接 保存 "“ 另 存 为 "“ 另 
存 为 模板 ”等 命令 。 

(1) 直接 保存 文件 。 选 择 “ 文 件 " 菜 单 ~“ 保 存 ” 命 令 , 如 果 是 第 一 次 保存 ,会 弹出 “ 另 
存 为 ”对 话 框 ,在 “保存 在 "下拉 列 表 中 选择 保存 文件 的 位 置 ,在 “文件 名 ”文本 框 中 输入 要 
保存 文件 的 名 称 ,如 图 3. 16 所 示 ;如 果 不 是 第 一 次 保存 , 则 会 直接 覆盖 保存 。 保 存 网 页 的 
组 合 键 为 Ctrl 十 S。 


布局 
本 及 
PE 1 
= 1 列 固定 , 居中 ， 标题 和 轩 主 
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Unicode 标准 化 表单 下 ); (由 范 分 解 ， 后 绢 规范 合成 ) 5s] $s 
厂 也 括 Unicede 签名 (p00) G) 站 点 根 目录 


图 3.16 “另存 为 "对 话 框 


(2)“ 另 存 为 其 他 文件 。 选 择 “ 文 件 " 菜 单一 “另存 为 "文件 命令 ,弹出 “另存 为 "对话 
框 ,如 图 3. 16 所 示 , 将 已 经 保存 的 文件 男 存 到 其 他 位 置 .或 重新 命名 保存 。 

(3) 保存 为 模板 。 选 择 “ 文 件 " 菜 单一“ 另存 为 模板 ”命令 ,弹出 “另存 为 模板 "对话 框 ， 
输入 模板 的 名 称 , 单 击 “ 保 存 ” 按 钮 将 文件 保存 为 模板 。 


CO. [msm mnt IE 


本 章 主要 介绍 了 以 下 几 点 内 容 。 

(1) Dreamweaver CS5 的 工作 界面 。 

(2) Dreamweaver CS5 常用 的 工具 面板 和 工具 栏 的 功能 等 。 
(3) 管理 站 点 : 创建 本 地 站 点 ,编辑 站 点 等 。 

(4) 创建 并 保存 网 页 的 方法 。 


简 述 定义 本 地 站 点 的 流程 。 


上 机 实验 


1. 实验 要 求 

创建 站 点 和 创建 网 页 。 要求: 定义 本 地 站 点 和 新 建 一 个 网 页 。 

2. 背景 知识 

根据 本 章 所 学 的 创建 站 点 和 创建 网 页 的 内 容 ,完成 上 机 实验 。 

3. 实验 准备 工作 

在 本 地 硬盘 创建 一 个 空 文件 夹 myweb ,并 建 一 个 子 文件 夹 images。 
4. 课时 安排 

上 机 实验 安排 1 课时 。 

5. 实验 指导 


(1) 定义 本 地 站 点 ,新 建 若 干 文件 夹 ,如 images \flash 等 ,有 些 文件 夹 可 和 暂时 为 空 , 以 
备 将 来 存放 设 定 的 内 容 。 
(2) 在 定义 好 的 站 点 下 新 建 一 个 网 页 ,第 一 个 网 页 为 index. htm 或 是 index. html。 


本 章 将 主要 介绍 网 页 中 所 包含 的 网 页 元 素 以 及 编辑 网 页 的 方法 。 


【本 章 学 习 目 标 】 


。 掌握 如 何 进行 页 面 属性 的 设置 ; 
。 掌握 文本 的 修饰 方法 ; 
。 掌握 设置 各 类 超 链接 的 方法 ; 


。 掌握 插入 图 像 .制作 翻转 图 像 、 制 作 图 像 映射 等 图 像 编辑 方法 
。 掌握 在 网 页 中 插入 页 面 元 素 并 进行 编辑 最 后 保存 网 页 的 方法 。 


4.1 实例 导入 : 西部 旅游 网 


【 例 4.1】 西部 旅游 网 的 网 站 首页 如 图 4. 1 所 示 。 
trip in west! 
一 一 : 娟 在 两 安 | 类 画 新疆。 述 经 西藏 | 影 云 之 行 其 力 江南 白雪 丙 宁 
欢迎 光临 


西部 旅游 网 


中 入 路 (西安 一 平凉 一 站 卫 ) 二 再 建 一 条 东西 于 动 的“ 院 夺 大 却 攻 ” 


件 宿 : 丘 安 各 补 规 闪 梢 这 的 守信 计 店 吉 六 有 . 


M 析 ”由 天 详 要 呈 西 安 , 
Sn 下 SSE) 本 


游 在 西安 


她 理 ， 西 安 币 身 人 民 五 县 ， 面 和 07? 杀 平 方 二 米 ， 人 口 E18 万 ， 是 陕西 岂 示 会 ， 也 是 我 国 本 北 地 区 乔 大 的 宾 和 - 
气 保 。 丙 去 地 处 灶 洒 守 大 关中 平 看 中部， 再 依 委 扒 ， 北 庆 广 河 ， 必 二 版 洁 带 尘 宇 况 的 至 风气 健 区， 四 手 信 明 ， 
了 


本 央 ， 到 名 递 让 人 达到 阴 几 居 


fa 
0 征 之 入 ”自习 交 者 105 征 到 公元 204 年 ， 相 妆 和 长 是 丰 化 中 国 的 可 省 ， 生 及 


交通 。 再 安 地 处 中国 妆 如 寺中 ty， 是 古代 闪 关 之 只 多 和 让， 作 关联 续 东 部 的 重要 交通 要 纽 ,西安 已 形成 了 以 
人 全， 这 其， 公庄 为 主 乓 现代化 疡 洒 闪 下 天 入 。 


公司 之 一 提 西 北 信 空 公司 ， 中 国 缮 全 闷 S< 司 机 安全 司 和 长 安 航空 人 司 的 总 学 部 设 在 
办 右 坟 再 安 守 把 了 


局 网际 要 基站 于 50 
点 和 再 状 ] 辽 售 系 站， 改革 时间 为 各 近 玩 系 闪 拓 20 分 李 ，。 系 价 生 人 元 


天 从 二 二 本 向 二 芋 全 革 坟 下 安 ， 与 于 法 中 的 神 


公路 ， 瑟 安 是 忆 次 于 北京 的 全 国 限 一 大 公 咎 交通 入 组 ， 基 和 有 ge 入 于 半 时 弃 轩 术 遂 往 宇 下 各 起 ， 
某 区 交通 ， 去 兵科 。 华 生意 一 污 ， 可 在 大富 站 于 305/307 乱 ， 俐 介 代 在， 这 奈 六 忌 ， 手 次 参 。 


图 4.1 “西部 旅游 网 "网 站 首页 


< | 网 站 规划 与 网 页 计 ] 


该 网 站 包含 了 若干 个 网 页 。 在 网 页 中 需要 输入 文本 、 插 人 图 像 .建立 超 链 接 等 多 种 网 
页 元 素 , 所 涉及 的 知识 点 有 以 下 几 点 。 

(1) 页 面 属性 的 设置 。 

(2) 文本 的 修饰 。 

(3) 插入 图 像 。 

(4) 插入 其 他 图 像 对 象 实现 特效 。 

(5) 多 个 网 页 之 间 建 立 超 链接 。 


4.2 页 面 属性 的 设置 


网 页 制作 的 第 一 步 是 设置 页 面 属性 ,具体 操作 步 台 如 下 。 

(1) 打开 “页 面 属性 ”对 话 框 ,设置 相应 的 参数 。 

方法 一 ” 单 击 “ 属 性 ”面板 习 “ 页 面 属性 ”按钮 ,弹出 “页 面 属性 ”对 话 框 。 

方法 二 ”选择 “修改 "菜单 “页 面 属性 ”命令 ,弹出 “页 面 属性” 对话 框 。 

(2) 打开 “外观 (CSS)” 选 项 卡 , 如 图 4.2 所 示 。 设 置 “ 页 面 字体 ”为 “默认 字体 ”大 
小 ”为 14 像素 ,“ 背 景 颜色 ”为 深 灰 色 (#CCC), 上 、 下 , 左 、 右 页 边 距 均 为 0。 

注意 :“ 外 观 ” 选 项 卡 有 两 类 ,“ 外 观 (CSS)” 选 项 卡 的 设置 是 基于 CSS 样式 ,将 自动 生 
成 CSS 样式 代码 ;“ 外 观 (HTML)” 选 项 卡 的 设置 是 基于 HTML 样式 ,将 自动 生成 


HTML 标签 。 
页 面 属性 
分 类 外 观 Css) 
OTNL) 页 面 字体 F): | 默认 字体 加 ez 
中 大 小 G): [14 辆 [sx 国 
a 文本 颜色 0): 国 
青 晤 颜色 @): 国 | [sccc 
青 景 图 像 I) 浏览 0) 
重复 EF) 辆 


图 4.2 “外 观 (CSS) ”选项 卡 


(3) 打开 “标题 /编码 ”选项 卡 ,如 图 4. 3 所 示 。 在 “标题 "文本 框 中 输入 “西部 旅游 
网 ”, 在 浏览 网 页 时 ,网 页 标题 会 出 现在 浏览 器 的 标题 栏 中 ,设置 网 页 的 编码 格式 为 “简体 
中 文 (GB2312)”。 

(4) 打开 “跟踪 图 像 选 项 卡 , 单 击 “ 跟 踪 图 像 ”文本 框 右 侧 的 “浏览 "按钮 ,选择 图 片 文 
件 , 拖 动 “透明 度 ” 滑 块 来 设置 跟踪 图 像 的 透明 度 ,如 图 4.4 所 示 。 


四 
标题 /编码 
观 (Css. 
中 十 标题 1) : [ 画 部 旅游 同 
标题 CsS) 文档 类 型 0TD) : | XHTWL 1.0 Transitional 图 
编码 中): [简体 中 文 (G82312) 国 切入 
ni code 标准 化 表单 F) 
文件 文件 夹 :. .设计 修订 版 \ 网 站 规划 与 网 页 设计 \shili42\ 
站 点 文件 夹 : . .设计 修订 版 \ 网 站 规划 与 网 页 设计 \shili42\ 
CD 
图 4.3 “标题 /编码 "选项 卡 
页 面 属性 茵 
分 类 跟踪 图 佛 
人 和 二) 中 时 图 你 ): [Inees/ 剖 国 .jpe WE] 
SS 
所 写 通明 区 0): 一 一 一 一 一 wx 
人 透明 不 和 明 


图 4.4 “跟踪 图 像 " 选 项 卡 


注意 :“ 跟 踪 图 像 ” 是 事先 用 图 像 设计 软件 绘制 好 的 网 页 草图 ,这 种 用 于 设计 网 页 布 
局 的 图 片 不 会 出 现在 浏览 器 中 。 


(5) 单 击 “确定 ”按钮 ,完成 “页 面 属性 设置 。 
4.3 文本 的 修饰 


修饰 文本 是 最 基本 的 网 页 制作 技能 ,包括 字体 的 修饰 .段落 的 对 齐 方式 等 操作 。 
4.3.1 输入 文本 


在 网 页 中 输入 文本 ,可 直接 输入 ,或 在 其 他 应 用 程序 中 编辑 好 并 复制 文本 ,然后 粘贴 
到 Dreamweaver 的 文档 窗口 中 。 下 面 就 文本 输入 时 的 一 些 技 巧 加 以 说 明 。 


< [ 网站 规划 St] 


1. 换行 和 段落 分 段 

1) 换行 

单 击 组 合 键 Shift 十 Enter, 或 单 击 * 插 入 ” 栏 一 文本 "按钮 组 一 “字符 ”按钮 组 一 “换行 
符 ” 按 钮 ,如 图 4.5 所 示 , 其 HTML 标签 为 <br>。 

2) 段落 分 段 

按 Enter 键 ,其 HTML 标签 为 一 p> 。 


2. 输入 特殊 字符 


1) 输入 连续 空格 

单 击 “ 插 入 ” 栏 一 文本 ?选项 一 “字符 ”按钮 组 一 "不 换行 空 
格 ”按钮 , 其 标签 为 “&nbsp;”, 或 切换 到 中 文 全 角 状 态 , 按 
Space 键 。 

2) 输入 特殊 字符 

单 击 “ 插 入 " 栏 一 “文本 ”选项 一 “字符 ”按钮 组 一 某 个 特殊 字 图 4.5 特殊 字符 输入 
符 按钮 ,如 图 4.5 所 示 。 


3. 插入 水 平 线 


在 网 页 中 插入 一 条 水 平 线 ,可 以 将 网 页 不 同类 型 的 元 素 分 隔 开 ,使 网 页 看 起 来 整齐 、 
清晰 。 单 击 “ 插 入 ” 栏 一 “常用 ”按钮 组 一 “水 平 线 ” 按 钮 ,如 图 4.6 所 示 。 其 HTML 标签 
为 二 hr 之 。 选 中 水 平 线 , 可 在 “属性 ?面板 中 设置 水 平 线 的 属性 ,包括 水 平 线 的 高 度 、 宽 度 、 
是 否 有 阴影 等 。 如 果 要 修改 水 平 线 的 颜色 , 则 必须 修改 HTML 代码 。 在 “文档 "工具 栏 
中 , 单 击 “ 代 码 " 按 钮 切换 到 “代码 ”视图 ,输入 HTML 代码 如 下 : 


<hr width="500" size="]1" noshade= "noshade" color="#00CC00"> 


“水 平 线 " 按 乌 
图 4.6 插入 水 平 线 


4. 文本 特殊 格式 : 上 标 和 下 标 


【 例 4.2】 输入 数学 公式 : X? 十 二 Zi1。 针 对 其 字体 的 特殊 格式 一 一 上 标 与 下 标的 
操作 步骤 如 下 。 

选择 “插入 "菜单 一 “标签 ”命令 ,弹出 “标签 选择 器 "对话 框 ,如 图 4.7(a) 所 示 。 单 击 
“HHTML 标签 ”选项 一 “格式 与 布局 ”选项 ,选择 sup( 上 标 标签 ) 或 sub( 下 标 标签 ) 选 项 ,再 
单 击 “ 插 入 ”按钮 .弹出 相应 的 “标签 编辑 器 ”对 话 框 在“ 内容” 文本 框 中 输入 要 设置 上 标 或 
下 标的 文本 , 单 击 “ 确 定 ” 按 钮 .如 图 4.7(b) 所 示 。 
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图 4.7 插入 上 标 或 下 标 


或 在 “文档 ”工具 栏 中 单 击 “代码 视图 ?按钮 ,切换 到 代码 视图 ,直接 输入 HTML 
代码 : 

X< sup>2< /sup>+Y<sup>3< /sup>=2<sub>1l< sub> 
然后 将 字母 X、Y 和 Z 设置 为 斜体 即 可 。 
4.3.2 文本 属性 的 设置 

文本 属性 的 设置 可 通过 “属性 ”面板 或 格式 ”菜单 来 设置 。 下 面 以 在 “属性 ”面板 中 设 
置 文本 属性 为 例 进行 讲解 。 

设置 文本 属性 时 ,有 两 种 选项 , 即 HTML 和 CSS 样式 ,两 者 之 间 可 以 切换 。 这 里 主 
要 讲解 基于 CSS 样式 定义 文本 属性 时 ,设置 文本 大 小 、 字 体 样式 、 字 体 类 型 以 及 文本 颜色 


的 方法 。 
(1) 文本 大 小 常用 的 单位 是 像素 (px) 或 是 点 数 (pt) ,正文 通常 选择 12 像素 或 
14 像素 。 


(2) 字体 样式 是 指 字符 的 外 观 样式 ,例如 粗 体 、 斜 体 、 下 划 线 等 。 
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(3) 在 网 页 中 ,文本 可 设置 显示 为 不 同 的 字体 类 型 ,但 网 页 正文 一 般 设置 为 默认 字 
体 。 因 为 如 果 选 择 浏览 者 客户 端 中 未 安装 的 字体 , 则 字体 仍 以 默认 字体 显示 。 

(4) 文本 颜色 值 以 十 六 进 制 数值 表示 。 

在 “属性 ”面板 中 选中 “CSS” 选 项 卡 后 ,在 “目标 规则 ”下 拉 列 表 中 选择 定义 新 的 CSS 
样式 ,或 应 用 已 定义 的 CSS 样式 ,如 图 4.8 所 示 。 


定义 字体 类 型 


定义 字体 大 小 定义 字体 大 小 的 单位 | 。 显示 色 值 
定义 文本 颜色 
图 4.8 文本 属性 的 设置 


在 “属性 ?面板 中 选中 CSS 标签 ,选中 文本 ,在 “属性 ”面板 中 文本 “大 小 ”下 拉 列 表 中 
选择 某 个 选项 ,如 图 4.9 所 示 。 
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图 4.9 文本 大 小 的 设置 


在 弹出 的 “新 建 CSS 规则 ”对 话 框 中 ,将 “选择 器 类 型 "设置 为 “类 "(可 应 用 于 任何 
HTML 元 素 ) ,在 “选择 嚣 名称” 文本 框 中 输入 选择 嚣 名称,“ 规 则 定义 ”为 ( 仅 限 该 文档 )， 
最 后 单 击 “ 确 定 ” 按 钮 ,如 图 4. 10 所 示 。 

还 可 以 在 CSS 选项 卡 中 定义 字体 样式 、 字 体 类 型 以 及 文本 颜色 等 ,如 图 4.11 所 示 。 


4.3.3 段落 格式 的 设置 


设置 段落 格式 时 ,在 “属性 ”面板 中 应 选中 HTML 选项 卡 ,然后 才能 定义 段落 格式 。 

段落 是 指 具 有 统一 样式 的 一 段 文 本 。 标 题 是 用 于 强调 段落 主题 的 文本 ,用 加 强 的 效 
果 来 表示 。 标 题 分 为 6 级 ,1 级 标题 显示 的 文字 最 大 ,6 级 标题 的 最 小 。 通 常 标题 文字 在 
浏览 器 中 显示 为 粗 体 并 自动 换行 。 

设置 段落 格式 的 方法 : 打开 “属性 ”面板 的 HTML 选项 卡 ,选中 文本 ,在 “格式 ?下 拉 
列表 中 选择 段落 或 某 级 标题 ,如 图 4. 12 所 示 。 
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图 4.10 “新 建 CSS 规则 ”对 话 框 
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(b) 定义 文本 颜色 (©) 文本 的 最 终 样式 
图 4.11 设置 “文本 ”属性 


图 4.12 标题 与 段落 的 设置 
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设置 段落 缩 进 方式 的 方法 : 选中 段落 ,或 光标 放 在 段落 中 , 单 击 “ 属 性 ”面板 HTML 
选项 卡 的 “内 缩 区 块 ?按钮 图 ,如 果 取消 缩 进 , 单 击 * 删 除 内 缩 区 块 ?按钮 国 即 可 ,如 图 4. 13 
所 示 。 


[sm 0) 


图 4.13 段落 缩 进 的 设置 


4.3.4 列表 格式 的 设置 


列表 是 比较 常见 的 一 种 文本 排版 格式 , 它 常 用 来 格式 化 网 页 中 包含 逻辑 关系 的 文本 
信息 。 列 表格 式 分 为 编号 列表 项目 列表 和 内 套 列表 ,如 图 4. 14 所 示 。 


“一 铅 套 列表 


图 4.14 列表 格式 


1. 项 目 列表 


项 目 列表 的 设置 方法 如 下 : 选中 段落 文本 , 单 击 “ 属 性 ”面板 一 HTML 标签 一 “项 目 
列表 ”按钮 园 。 

列表 中 的 项 目 符号 可 以 更 改 。 比 如 把 项 目 符号 从 全 修改 为 图 .方法 是 将 光标 放 在 列 
表 文 本 中 , 单 击 HTML 选项 卡 中 的 “列表 项 目 ” 按 钮 ,弹出 “列表 属性 ”对 话 框 ,如 图 4. 15 
所 示 “ 列 表 类 型 "选择 “项 目 列表 ”, 在 “样式 ”下 拉 列 表 框 中 选择 “正方 形 " 样 式 即 可 。 


2. 编号 列表 


通过 有 序 的 编号 可 以 更 清楚 地 表达 信息 的 顺序 ,其 设置 方法 与 项 目 列表 相似 。 编 号 
列表 设置 方法 如 下 : 选中 段落 文本 , 单 击 HTML 选项 卡 中 的 “编号 列表 ”按钮 功 。 
列表 中 的 编号 样式 和 开始 计数 值 均 可 更 改 。 方 法 是 将 光标 放 在 列表 文本 中 , 单 击 
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图 4.15 列表 属性 设置 


HTML 选项 卡 中 的 “列表 项 目 ” 按 钮 ,弹出 “列表 属性 ”对话 框 ,“ 列 表 类 型 "选择 “编号 列 
表 ”, 在 “样式 ”下 拉 列 表 框 中 选择 编号 样式 ,在 “开始 计数 ”文本 框 中 输入 数值 , 即 修改 了 开 
始 计 数值 。 


3. 谋 套 列表 


嵌 套 列表 存在 父 列表 和 子 列 表 的 旬 辑 关系 。 设 置 方法 如 下 : 在 已 定义 好 的 列表 中 ， 
选中 作为 子 列表 的 若干 列表 , 单 击 HTML 选项 卡 中 的 “内 缩 区 块 " 按 钮 ,从 而 实现 列表 之 
间 的 由 套 关系 。 赃 套 列表 可 以 是 有 序 检 套 列表 、 无 序 骨 套 列表 和 混合 陪 套 列表 。 


4.3.5 滚动 文本 


在 网 页 中 如 何 让 文本 或 图 片 自动 深 动 .并 且 当 鼠标 指针 经 过 时 ,文本 会 停 下 来 ,鼠标 
指针 移 开 后 继续 深 动 呢 ? 设置 方法 如 下 。 

选中 文本 ,执行 “插入 ”一 “标签 "命令 ,弹出 “标签 选择 器 "对 话 框 ,选择 “HTML 标签 ” 
选项 一 “页 面 元素 ” 选 项 ,选中 marquee 选项 ,再 单 击 “插入 ”按钮 ,关闭 “标签 选择 器 对话 
框 。 此 时 切换 到 “代码 ”视图 ,查看 到 如 下 代码 : 


<marquee> 滚 动 的 文本 段落 < /marquee> 
可 在 过 marquee 之 标签 内 添加 一 些 参 数 ,参数 之 间 用 空格 隔 开 , 实 现 文本 或 图 像 滚动 的 特 
效 ,例如 : 


<marquee direction="up" onmouseover="this. stop ()" onmouseout= "this. start ()" 


behavior="alternate" > 欢迎 访问 风 清 月 影 的 网 站 < /marquee> 


其 中 ,direction: 表示 滚动 的 方向 .有 up( 向 上 )、down (向 下 )、left( 向 左 ,默认 )、right 
(向 右 ) 。 
behavior: 表示 滚动 的 方式 ,有 scroll( 滚 动 ,默认 ) alternate( 交 替 ) .slide( 移 动 ) 。 
onmouseover 一 "this. stop()": 表示 鼠标 指针 经 过 时 ,文本 停留 。 
onmouseout 一 "this. start()": 表示 鼠标 指针 移 开 后 ,文本 开始 滚动 。 
添加 参数 有 两 种 方法 : 一 是 直接 在 一 marquee 二 中 输入 参数 ;二 是 选择 “窗口 "菜单 一 
“标签 检查 器 "命令 ,打开 “标签 检查 器 ”面板 ,在 其 中 设置 参数 。 
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4.4 设置 超 链接 


超 链接 是 组 成 网 站 的 基本 元 素 ,通过 超 链接 将 多 个 网 页 组 成 一 个 网 站 。 浏 览 者 通过 
超 链 接 选 择 阅 读 路 径 。 超 链接 是 通过 URL( 统 一 资源 定位 符 ) 来 定位 目标 信息 的 。 


4.4.1 URL 地 址 
1. 绝对 URL 


绝对 URL 指 在 Internet 上 资源 的 完整 地 址 ,包括 完整 的 协议 类 型 .计算 机 域名 或 IP 
地 址 、 包 含 路 径 信息 的 文档 名 。 书 写 格式 如 下 : 


协议 : // 计 算 机 域名 或 TP 地址 [: 端 口号 1] [/ 文 档 路 径 ] [/ 文 档 名 ] 
例如 : 


http://www.mydrivers.com/download/download.htm 


URL 常用 的 协议 有 以 下 几 种 。 

HTTP 一 一 超 文本 传输 协议 ,例如 http://www. sina. com. cn。 

FTP 一 一 文件 传输 协议 ,例如 ftp://ftp. newhua. com。 

MAILTO 一 一 传输 E-mail 协议 ,例如 mailto:duyonghong@163. com 。 

若 采 用 协议 默认 端口 号 ,端口 号 参数 可 省 略 ;index. htm ,index. html 或 default. htm 
是 默认 首页 名 称 , 可 以 省 略 。 


2. 相对 URL 


相对 URL 指 文件 与 链接 目标 之 间 的 相对 位 置 关系 ,一 般 是 指 同 站 点 内 的 链接 。 

如 链接 到 同一 路 径 的 文档 ,可 直接 输入 文件 名 ,如 products. htm。 

如 链接 到 同一 路 径 下 子 文件 夹 的 文档 , 则 需 先 输入 子 文件 夹 名 和 和 斜 杠 (/) ,再 输入 文 
件 名 ,如 yule/ music. htm。 

如 链接 到 上 一 级 路 径 中 , 则 要 在 文件 名 前 输入 *../”, 如 *.. /index. htm”。 


4.4.2” 超 链接 的 分 类 


超 链 接 的 分 类 有 很 多 种 , 按 链 接 目 标的 不 同 , 超 链接 分 为 文件 链接 、 锚 记 链 接 、 电 子 邮 
件 链接 ; 按 链接 单 击 对 象 的 不 同 , 超 链接 分 为 文字 链接 、 图 像 链接 和 图 像 映射 等 。 


1. 文件 链接 


文件 链接 是 指 链接 目标 为 其 他 网 页 或 文件 。 浏 览 者 单 击 超 链接 时 将 跳 转 到 相应 的 网 
页 或 显示 相应 的 文件 。 

设置 文件 链接 的 方法 如 下 。 

选中 要 创建 超 链 接 的 文本 或 图 像 .在 “属性 ”面板 HTML 选项 卡 中 的 “链接 ”文本 框 
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中 输入 URL 地 址 ,或 单 击 “ 链 接 "文本 框 右 侧 的 “浏览 文件 "按钮 加 ,如 图 4. 16 所 示 , 弹 出 
“选择 文件 ”对 话 框 ,在 此 选择 相应 的 文件 ,如 图 4. 17 所 示 。 


MO oae B® ” 习 
图 4.16 设置 超 链接 


选择 文件 名 目 : @) 文件 系统 
品 数 据 源 


[站 训 和 服务 器 


查找 范围 四 :| 已) :hili42 国 @E BB- 
Binsees 


[ 
加 | 所 有 文件 (*.*) 


图 4.17 “选择 文件 ”对 话 框 


注意 : 如 果 超 链接 文件 是 浏览 器 支持 的 文件 夹 格 式 , 如 HTML、JPG 格式 等 ,那么 浏 
览 器 将 直接 打开 该 文件 ; 当 超 链接 的 目标 文件 不 是 浏览 器 所 支持 的 文件 格式 ,如 ZIP 格 
式 \RAR 格式 .EXE 格式 等 , 单 击 超 链接 时 ,将 会 弹出 “文件 下 载 " 对 话 框 。 因 此 制作 文件 
下 载 链接 时 ,可 将 文件 压缩 为 ZIP 或 RAR 格式 , 供 浏 览 者 下 载 。 


2. 锚 记 链接 


为 了 方便 浏览 者 浏览 篇 幅 较 长 的 网 页 ,可 利用 锚 记 链接 实现 一 个 页 面 之 间 的 快速 跳 
转 。 操 作 步 又 如 下 。 

(1) 首先 将 光标 置 于 超 链接 跳 转 目标 的 位 置 , 单 击 “ 插 入 " 栏 一 “常用 ”按钮 组 一 “命名 
锚 记 ”按钮 。 

(2) 选中 导航 信息 , 拖 动 深 动 条 到 链接 目标 处 , 单 击 “ 属 性 ”面板 中 “链接 ”文本 框 右 侧 
的 “指向 文件 "按钮 区 ,将 其 拖 动 到 错 记 标 记 图 处 即 可 .如 图 4. 18 所 示 。 此 时 “链接 "文本 
框 中 将 出 现 *: # 锚 记名 称 ”( 此 处 为 "并 aa”) 。 因 此 也 可 直接 在 “链接 ”文本 框 中 输入 : # 
锚 记 名 称 , 则 当 单 击 导航 信息 时 ,可 直接 跳 转 到 相应 的 链接 目标 处 。 

除了 可 创建 同一 页 面 中 的 锚 记 链接 外 ,还 可 创建 指向 不 同 页 面 中 的 锚 记 链接 ,此 时 只 
要 将 超 链接 指定 为 “包含 锚 记 链接 页 面 的 URL 地 址 并 该 网 页 的 锚 记 名 称 ” 即 可 。 


3. 空 链接 
空 链接 一 般 默认 指向 当前 页 面 ,并 不 会 打开 新 的 网 页 文件 。 此 种 链接 并 不 常用 ,一 般 


Co 网 站 规划 与 网 页 设计 


i 


EE 0 二 到 三 


A 


| 
人 
A 赴 肯 te Ee 和 区 
ne 
mh ye 人 只 
a 和 本 的 手 宣 滨 。 
hoay> uly ol> uy di STYLE2yFay | 
属性 
[4>rmL] | 格式 四 | 无 回 费 | STYLEF2 var 
bcss wD) 无 vv 链接 OLD) za 
图 4.18 制作 锚 记 链接 
会 和 JavaScript 脚本 语言 配合 使 用 ,以 达到 一 些 特 殊 的 网 页 特效 
个 空 链接 。 
4. 电子 邮件 链接 


设置 方法 如 下 : 在 “属性 ”面板 的 “链接 ”文本 框 中 输入 一 个 单独 的 “#” 号 , 即 表 示 一 


电子 邮件 链接 是 指 当 浏 览 者 单 击 超 链接 时 ,系统 会 启动 客户 端 电子 邮件 程序 (例如 
Outlook Express) ,并 打开 新 邮件 窗口 ,使 访问 者 能 方便 地 撰写 电子 邮件 。 操 作 步 又 如 下 
(1) 将 光标 定位 在 需要 插 和 人 电子 邮件 链接 的 位 置 。 


i 地 撰写 
(2) 选择 “插入 ?” 栏 一 "常用 "按钮 组 一 电子 邮件 链接 ”按钮 


(3) 弹出 “电子 邮件 链接 ”对话 框 ,输入 链接 文本 和 电子 邮件 地 址 ,如 图 4. 19 所 示 。 
ET 
-全 we | 
> | 


图 4.19 “电子 邮件 链接 ”对 话 框 
或 选中 要 创建 链接 的 文本 或 图 像 .在 “属性 ”面板 HTML 选项 卡 中 的 “链接 ”文本 框 
中 直接 输入 “mailto: 电子 邮件 地 址 ”。 
4.4.3 选择 链接 目标 


在 设置 好 链接 文件 后 ,还 应 


该 选择 打开 链接 文件 的 目标 , 即 打开 链接 文件 的 浏览 器 窗 
口 。 设 置 方法 如 下 : 单 击 “ 属 性 ”面板 HTML 选项 卡 中 的 “目标 ?下 拉 列 表 ,选择 某 项 参数 
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即 可 ,如 图 4. 20 所 示 。 
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图 4.20 链接 目标 选择 


具体 参数 如 下 所 述 。 

(1) _blank: 表示 在 新 的 浏览 器 窗口 打开 链接 文件 。 

(2) _self: 表示 在 当前 窗口 打开 链接 文件 ,默认 状态 。 

(3) _parent: 表示 在 包含 框架 结构 的 上 一 级 浏览 器 窗口 打开 链接 文件 。 
(4) _top: 表示 删除 框架 结构 ,在 整个 浏览 器 窗口 打开 链接 文件 。 


4.5 制作 包含 超 链 接 的 纯 文本 网 站 


本 节 通 过 完成 一 个 简单 的 网 站 实例 来 即时 复习 巩固 前 面 所 学 的 内 容 。 
1. 定义 本 地 站 点 


启动 Dreamweaver 软件 ,选择 “站 点 ”菜单 一 “新 建站 点 ”命令 ,创建 本 地 站 点 ,并 在 站 
点 根 目录 下 创建 三 个 文件 夹 : shige、sanwen 和 xiaoshuo。 


2. 制作 首页 
网 站 首页 如 图 4. 21 所 示 ,制作 过 程 如 下 所 述 。 


坎 迎 访问 风情 月 影 的 网 站 
读 
者 
闫 : 
摘 


笋 这 | 诗歌 | 小 说 
扎 版 权 所 有 :网 清 月 影 
友情 链接 与 我 联系 


图 4.21 首页 效果 图 


(1) 新 建 一 个 空白 网 页 , 单 击 “ 属 性 ”面板 一 “页 面 属性 ”按钮 ,弹出 “页 面 属性 ”对 话 
框 ,进行 如 下 设置 。 


网 站 规划 与 网 页 设计 


在 “外 观 CSS” 选 项 卡 中 设置 页 面 字体 大 小 为 14 像素 ,设置 背景 图 像 为 images/3e. jpg， 
设置 页 边 距 均 为 0。 
在 “标题 /编码 ”选项 卡 中 ,设置 网 页 标题 为 “读者 文摘 ”; 单 击 “ 确 定 ” 按 钮 。 保 存 该 网 


页 ,并 将 其 命名 为 index. htm。 

(2) 在 “设计 ”视图 中 输入 文本 “读者 文摘 ”, 在 每 个 文字 后 按 Enter 键 实现 竖 排 效果 。 
选中 文本 ,在 “属性 ”面板 CSS 选项 卡 中 设置 “字体 ”为 “楷体 CS”, 字 体 “大 小 ”为 36 像素 ， 
对 齐 方式 为 “居中 ”, 如 图 4. 22 所 示 。 


目标 规则 | STYLEE | 


Er zl 
编 可 轴 则 ”| 555 而 而 E | | 大 小 驴友 ”习习 站 
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图 4.22 文本 样式 设置 
(3) 在 “读者 ”后 插入 特殊 字符 。 选 择 * 插 入 ” 栏 一 “文本 ”按钮 组 一 “字符 ”按钮 组 一 
“其 他 字符 ”按钮 ,弹出 “插入 其 他 字符 ”对 话 框 ,选择 圆 点 字符 , 单 击 “ 确 定 ” 按 钮 ,如 图 4. 23 
所 示 。 
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图 4.23 “插入 其 他 字符 ”对 话 框 


(4) 单 击 “ 插 入 ” 栏 一 “常用 ”按钮 组 “水平线” 按钮 ,插入 一 条 水 平 线 , 在 “属性 ”面板 
中 设置 水 平 线 的 高 度 和 宽度 ,取消 “阴影 " 复 选 框 ,切换 到 代码 视图 ,在 二 hr 二 标签 内 添加 
color="#00CC00"。 

(5) 按 Enter 键 ,输入 文本 “散文 ”, 按 组 合 键 “Shift 十 \”, 输 入 “1”, 同 理 输入 文本 “ 诗 
歌 1” 和 “小 说 ”。 

(6) 按 Enter 键 ,选择 “插入 " 栏 一 文本 ”按钮 组 一 "字符 ?按钮 组 一" @ 版 权 ” 按 钮 , 插 
和 版权 符号 ,并 在 其 后 输入 文本 “版 权 所 有 : 2012 风 清 月 影 ”。 

(7) 输入 文本 “友情 链接 ”, 选 中 “友情 链接 ”, 在 “属性 ”面板 一 HTML 选项 卡 一 “ 链 


接 "文本 框 中 输入 链接 地 址 http://www. hongxiu. com。 
(8) 将 输入 法 切换 到 中 文 全 角 状 态 , 单 击 “ 空 格 ? 键 , 单 击 “ 插 入 ? 栏 一 常用 ”按钮 组 一 
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“电子 邮件 链接 ”按钮 ,在 弹出 的 “电子 邮件 链接 ”对 话 框 中 输入 文本 “与 我 联系 ”, 输 入 邮件 
地 址 susan0513@sina. com。 

(9) 在 网 页 最 上 方 , 输 入 文本 “欢迎 访问 风 清 月 影 的 网 站 ”。 切 换 到 “代码 ”视图 ,在 此 
文本 前 后 分 别 输入 代码 二 marquee 二 和 二 /marquee 二 。 


3. 制作 “散文 精 选 "页面 
“散文 精 选 "页面 如 图 4. 24 所 示 ,制作 过 程 如 下 。 


散文 精 选 
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图 4.24 “散文 精 选 "页 面 的 效果 图 


(1) 新 建 一 个 空白 网 页 ,在 “文档 ”工具 栏 一 "标题 "文本 框 中 输入 “散文 精 选 ”, 保 存 网 
页 在 sanwen 文件 夹 中 ,网 页 名 为 index. htm 。 

(2) 单 击 “ 属 性 ”面板 中 的 “页 面 属性 "按钮, 打开“ 页面 属性 ”对 话 框 ,设置 字体 大 小 为 
14 像素 ,设置 背景 颜色 为 # FFFFCC。 

(3) 在 “文档 ”窗口 中 输入 文本 “散文 精 选 ”. 并 设置 其 字体 为 “隶书 ”, 字 体 大 小 为 36 像 
素 ,字体 颜色 为 #009900, 文 本 对 齐 方式 为 居中 。 

(4) 按 Enter 键 ,再 输入 导航 文本 “首页 | 散文 | 诗歌 | 小说"。 选 中 “首页 ”, 单 击 
“属性 ”面板 中 “链接 "文本 框 右 侧 的 “浏览 文件 ”按钮 .选择 站 点 根 目录 下 的 index. htm 文 
件 , “链接” 文本 框 中 即 显 示 *.. /index. htm”。 

(5) 单 击 “ 插 入 ” 栏 一 “常用 ”按钮 组 一 “水 平 线 ” 按 钮 ,插入 一 条 水 平 线 ; 再 单 击 “ 插 入 ” 
栏 一 常用 ”按钮 组 一 日 期 ”按钮 ,弹出 “插入 日 
期 ?对 话 框 , 如 图 4. 25 所 示 , 在 “日 期 格式 ”下 拉 
列表 中 选择 一 种 日 期 格式 。 

(6) 按 Enter 键 ,输入 几 段 文本 作为 散文 
题目 的 列表 ,将 其 分 别 设置 为 编号 列表 和 项 目 
列表 ,通过 文本 缩 进 实现 嵌 套 列表 等 。 

(7) 按 Enter 键 ,插入 鲁迅 先生 的 画像 图 
片 ,并 输入 散文 “ 苹 时 先生 ”的 标题 及 散文 内 容 。 

(8) 设置 锚 记 链接 。 首 先 在 “ 苹 野 先生 ” 标 图 4.25 “插入 日 期 "对 话 框 


Co (ws 规 WS 风 页 寻 ] 


题 文 本 处 插入 “命名 锚 记 ”标记 ,在 散文 目录 处 选中 “ 芯 时 先生”, 移动 深 动 条 到 锚 记 标记 位 
置 , 单 击 * 属 性 ?面板 中 的 “链接 "文本 框 右 侧 的 “指向 文件 按钮 , 拖 动 该 按钮 到 锚 记 标记 
处 , 松 开 鼠标 左 键 即 可 。 

(9) 最 后 添加 其 他 页 面 内 容 , 并 设置 超 链接 ,完成 站 点 的 制作 。 


4. 站 点 测试 


在 网 页 编辑 状态 , 按 快捷 键 F12 在 浏览 器 中 浏览 网 页 ,查看 超 链 接 是 否 能 够 正常 跳 
转 , 并 确保 每 个 网 页 都 有 适当 的 网 页 标题 。 


4.6 编辑 图 像 


图 像 是 网 页 中 非常 重要 的 元 素 。 如 能 在 网 页 中 添加 精致 .美观 的 图 像 , 会 使 网 页 变 得 
丰富 多 彩 。 在 插入 图 像 时 ,首先 要 考虑 图 像 在 页 面 中 的 整体 效果 ,其 次 应 综合 考虑 图 像 的 
质量 和 下 载 速度 。 目 前 网 页 中 支持 的 图 像 格式 有 以 下 三 种 。 

(1) GIF( 索 引 颜 色 格式 ): GIF 最 多 支持 256 色 , 为 无 损 压缩 ,有 透明 处 理 的 功能 , 支 
持 动画 效果 。 

(2) JPG( 联 合 图 像 专家 组 ): JPG 支持 较 高 的 压缩 比 , 属 有 损 压 缩 ,支持 真 色彩 ,在 处 
理 JPG 图 像 时 ,要 选择 合适 的 压缩 品质 。 

(3) PNG( 可 移植 网 络 图 形 ): PNG 是 专门 针对 Web 开发 的 无 损 压缩 图 像 , 支 持 真 色 
彩 和 透明 处 理 。 


4.6.1 插入 图 像 


插入 图 像 的 方法 有 多 种 ,以 下 介绍 常用 的 两 种 。 
方法 一 ”光标 放 在 要 插入 图 像 的 位 置 ,选择 * 插 入" 菜单" 图像” 命令 。 


选择 图 银 源 文件 x 
选择 文件 名 自 : 6 文件 系统 
(3 
Die OY 
工 


botton. gif logobe jpe er 
7 CC 三 
rr 
WRL: linages/lucun jpe 
椰 皇 : 友基。 可 ina au 
本 定 义 中 硬 于 认 的 涟 近 相 对 王 


蕊 


图 4.26 “选择 图 像 源 文件 "对话 框 


第 4 章 制作 页 面 Ko> | 


方法 二 单 击 “ 插 入 ” 栏 >“ 常 用 ”按钮 组 一 “图像” 按钮 组 一 “图 像 " 按 钮 。 
弹出 “选择 图 像 源 文 件 ” 对 话 框 ,选择 图 像 文件 , 单 击 “ 确 定 ” 按 钮 ,如 图 4. 26 所 示 。 


4.6.2 设置 图 像 属 性 


选中 图 像 ,在 “属性 ?面板 中 设置 图 像 的 属性 。 例 如 图 像 的 高 度 、 宽 度 , 边 框 、 垂 直 边 
距 、 水 平 边 距 及 图 像 的 对 齐 方 式 等 属性 ,如 图 4. 27 所 示 。 
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1. 图 像 的 尺寸 


图 4.27 设置 图 像 属性 


“属性 ?面板 中 的 “高 > 和”* 宽 ”文本 框 的 数值 显示 了 图 像 的 尺寸 ,告诉 浏览 器 应 分 配给 
图 像 多 大 的 空间 ,以 像素 为 单位 。 可 直接 输入 数值 来 改变 图 像 的 尺寸 ,或 选中 图 像 , 拖 动 
图 像 的 控制 柄 来 调整 图 像 大 小 ,同时 按 住 Shift 键 并 拖 动 右 下 角 控制 柄 时 ,可 成 比例 地 缩 
放 图 像 的 大 小 。 如 果 图 像 的 尺寸 不 是 源 图 像 尺寸 ,数值 会 以 加 粗 显 示 ,并 且 出 现 一 个 还 原 
按钮 已, 单 击 此 按钮 可 还 原 到 原始 尺寸 。 

注意 : 一 般 情况 下 ,建议 不 要 使 用 指定 高 度 、 宽 度 的 方式 缩放 图 像 ,而 应 在 图 像 处 理 
软件 中 对 图 像 进行 处 理 , 然 后 再 插入 到 网 页 中 。 因 为 用 指定 高 、 宽 的 方式 不 能 改变 图 像 所 


占 字 节 数 , 即 不 能 缩短 图 像 下 载 的 时 间 , 只 是 改变 了 图 像 显 示 的 空间 。 


2. 图 像 的 对 齐 方式 及 与 周围 内 容 的 距离 
(1) 设置 图 像 与 周围 内 容 对 齐 方式 。 打 开 “ 属 性 ”面板 中 “对 齐 ” 下 拉 列 表 来 选择 对 齐 


太 式 。 
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(2) 设置 图 像 与 周围 内 容 的 距离 。 在 “垂直 边 距 ”和 “水 平 边 距 ” 文 本 框 中 输入 的 数值 
决定 了 图 像 与 周围 内 容 的 距离 ,如 图 4. 28 所 示 。 
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图 4.28 设置 图 像 对 齐 方式 及 边 距 


3. 图 像 的 其 他 属性 


(1) 边框 : 图 像 边框 默认 为 0, 如 果 要 设置 边框 可 在 边框 文本 框 中 输入 一 个 数值 。 

(2) 替换 : 在 替换 文本 框 中 输入 文本 , 当 图 像 在 浏览 器 中 不 能 显示 时 , 则 在 图 像 区 域 
显示 该 文本 ,如 果 图 像 能 够 正常 显示 , 则 当 鼠 标 经 过 图 像 时 ,对 图 像 进行 文字 诠释 。 

(3) 编辑 : 在 “属性 ?面板 中 的 “编辑 选项 中 ,可 以 单 击 “编辑 ”按钮 ,将 运行 如 
Fireworks 或 Photoshop 程序 对 图 像 文件 进行 编辑 。 面 板 右 侧 还 有 剪裁 .增加 亮度 和 对 
比 度 、 锐 化 等 按钮 。 

(4) 链接 和 目标 : 用 于 指定 超 链接 路 径 及 链接 目标 。 


4.6.3 制作 翻转 图 像 


翻转 图 像 是 指 当 鼠 标 经 过 图 像 时 ,显示 另外 一 张 图 像 ;鼠标 移 开 后 ,还 原 为 原始 图 像 。 

制作 过 程 如 下 : 首先 准备 两 张 尺寸 相同 的 两 幅 图 像 ,选择 “ 插 入 " 栏 一 “常用 ”按钮 组 一 
“图 像 ” 按 钮 组 一 “鼠标 经 过 图 像 ” 按 钮 ,或 选择 “插入 ”菜单 “图像 对 象 *>“ 鼠 标 经 过 图 
像 "命令 ,弹出 “插入 鼠标 经 过 图 像 ” 对 话 框 ,如 图 4. 29 所 示 ,进行 如 下 参数 设置 。 


Ed 
确定 

图 像 名 称 : |Tnage2 _ 达 | 

放大 全 [7inatesiU rsteet al 7 

康 标 经 过 图 像 :「 EEC jpg 3 古本 


图 4.29 “插入 鼠标 经 过 图 像 " 对 话 框 


(1) 单 击 “原始 图 像 "文本 框 右 侧 的 “浏览 ?按钮 ,在 “原始 图 像 " 对 话 框 中 ,选择 作为 原 
始 图 像 的 图 像 文 件 。 

(2) 单 击 “ 和 鼠标 经 过 图 像 " 文 本 框 右 侧 的 “浏览 ”按钮 ,在 “鼠标 经 过 图 像 ” 对 话 框 中 , 选 
择 作为 鼠标 经 过 图 像 的 图 像 文件 。 

(3) 选中 “ 预 载 鼠标 经 过 图 像 " 复 选 框 ,确保 鼠标 经 过 图 像 时 图 像 效 果 更 加 平滑 。 
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(4) 在 “ 按 下 时 ,前 往 的 URL” 文 本 框 中 ,输入 链接 地 址 。 
(5) 最 后 单 击 “ 确 定 ” 按 钮 , 当 浏 览 网 页 时 ,鼠标 经 过 ,图 像 产 生变 化 。 


4.6.4 ”制作 图 像 映射 


图 像 映 射 是 指 在 一 幅 图 像 中 指定 若干 个 区 域 ,这 些 区 域 被 称 为 热点 ,每 一 个 区 域 可 链 
接 到 不 同 的 URL 地 址 。 图 像 映射 最 常用 于 电子 地 图 、 页 面 导航 图 、 页 面 导航 条 等 。 操 作 
步骤 如 下 。 

(1) 选中 图 像 ,在 “属性 ?面板 左下 方 , 选 中 * 圆 形 热点 工具 图标, 如 图 4. 30 所 示 。 按 
住 鼠 标 左 键 ,在 地 图 上 绘制 一 个 圆 形 , 在 “属性 ”面板 的 “链接 "文本 框 中 输入 链接 地 址 。 

(2) 选中 * 和 矩形 热点 工具 ”图 标 芝 |, 按 住 鼠 标 左 键 , 在 “黄河 壶 口 瀑布 "处 ,绘制 一 个 矩 
形 ,在 “链接 "文本 框 处 输入 链接 地 址 。 

(3) 同 理 ,还 可 选中 ”多边形 热点 工具 ”图 标 昌 ,绘制 多 边 形 ,并 添加 链接 地 址 ,效果 如 
图 4.31 所 示 。 


图 像 ,5IK 。” 痪 D) 有 50 ” 源 文 件 E)|scesew eof 久 忆 省 Rm[ 到 
Ba 高 o0 0 9D itzan 
dt 四 m ww 香 直 边 距 W 厂 ”目标 0)[ 避 ip 对 名 OMA 
[IJ DO kp 原始 ”对齐 内 国 认 什 习 


圆 形 热点 工具 


图 4.30 使 用 图 像 热 点 工具 
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图 4.31 图 像 映射 
本 章 小 结 


本 章 主要 介绍 了 网 页 元 素 的 编辑 及 相关 属性 的 设置 方法 ,包括 以 下 几 个 方面 。 
(1) 网 页 文本 的 编辑 。 

(2) 超 链接 的 建立 。 

(3) 插入 图 像 和 其 他 图 像 对 象 。 


< [ 网 站 规划 与 网 KiR 计 | 


练 习 题 


(1) 一 个 完整 的 URL 地 址 应 包括 哪些 内 容 ? 超 链接 中 的 绝对 路 径 和 相对 路 径 有 什 
么 区 别 ? 

(2) 在 一 幅 图 像 中 创建 多 个 链接 区 域 ,如 何 实 现 ? 

(3) 网 页 中 支持 的 图 像 格式 有 哪些 ? 它们 各 有 什么 特点 ? 


上 机 实验 


1. 实验 要 求 


创建 一 个 以 花 为 主题 的 网 站 ,要 求 如 下 。 
(1) 编辑 网 站 首页 ,效果 如 图 4. 32 所 示 。 


图 4.32 无 双 花园 首页 
(2) 编辑 其 他 内 容 网 页 并 添加 超 链 接 , 其 他 页 面 中 包括 有 图 像 和 文本 等 元 素 。 
2. 背景 知识 


根据 本 章 所 学 的 文本 编辑 .插入 图 像 及 其 他 图 像 对 象 . 超 链接 的 设置 等 知识 进行 网 站 
的 创建 。 


3. 实验 准备 工作 

将 文本 素材 和 图 像素 材 准备 好 ,发 送 到 学 生 主机 上 ,以 供 学 生 参 考 使 用 。 
4. 课时 安排 

上 机 实验 安排 2 课时 。 
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5. 实验 指导 


1) 网 站 首页 制作 过 程 

(1) 启动 Dreamweaver, 定 义 本 地 站 点 ,新 建 一 个 网 页 ,将 其 保存 为 index. htm。 

(2) 单 击 “ 属 性 ”面板 中 的 “页 面 属性 ”按钮 ,选择 外 观 (CSS)” 选 项 卡 , 设 置 上 、 下 、 
左 、 右 边 距 均 为 0, 选择 “标题 /编码 ”选项 卡 , 设 置 网 页 标题 为 “无 双 花 园 ”。 

(3) 单 击 “ 插 入 " 栏 一 “常用 ”按钮 组 一 “图像” 按钮 组 一 “图 像 " 按 钮 ,插入 图 像 index. 
gif, 选 中 图 像 , 分 别 单 击 “ 属 性 ”面板 中 的 圆 形 热点 工具 \、 和 矩形 热点 工具 、 多 边 形 热 点 工具 ， 
在 图 像 上 绘制 圆 形 区 域 ,矩形 区 域 , 多 边 形 区 域 , 分 别 在 * 属 性 ?面板 的 “链接 ”文本 框 中 输 
入 链接 地 址 。 

(4) 单 击 “ 插 入 " 栏 一 “布局 ”按钮 组 一 “绘制 层 " 按 钮 ,在 编辑 界面 绘制 一 层 , 在 层 内 添 
加 鼠标 经 过 图 像 , 字 样 为 “欢迎 来 到 无 双 花 园 ”, 添 加 链接 地 址 ,完成 首页 的 制作 。 

2) 制作 内 容 页 面 ( 见 图 4. 33) 
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图 4.33 无 双 花 园 内 容 页 面 


(1) LOGO 采用 翻转 图 像 效 果 ,添加 链接 到 首页 的 地 址 ,插入 多 个 鼠标 经 过 图 像 效 果 
制作 导航 条 。 

(2) 利用 图 像 背景 美化 网 页 。 

(3) 添加 Flash 动画 。 

(4) 添加 网 页 之 间 的 超 链接 。 


本 章 主要 介绍 了 几 种 网 页 布局 技术 : 表格 排版 、 层 排版 ,框架 排版 ,还 介绍 了 利用 
Dreamweaver 内 部 行为 制作 网 页 特效 的 方法 。 


【本 章 学 习 目 标 】 


。 了 解 网 页 版 面 布局 结构 ; 

。 掌握 表格 排版 技术 ; 

。 掌握 层 排 版 技术 ; 

。 掌握 框架 排版 技术 ; 

。 了解 利用 Dreamweaver 内 部 行为 制作 网 页 特效 的 技巧 。 


5.1 网 页 版 面 布 局 概述 


布局 就 是 以 最 适合 浏览 的 方式 将 图 片 和 文字 摆 放 在 页 面 的 不 同位 置 。 版 面 指 的 是 浏 
览 器 看 到 的 完整 的 一 个 页 面 。 网 页 版 面 布局 是 网 页 设计 中 的 一 项 重要 内 容 。 网 页 版 面 布 
局 是 指 规定 网 页 内 容 在 浏览 器 中 的 显示 方式 ,例如 徽标 的 位 置 .导航 栏 的 显示 、 主 要 内 容 
的 排版 方式 等 。 因 为 每 个 人 的 显示 器 分 辩 率 不 同 , 同 一 个 页 面 的 分 辩 率 可 能 出 现 1024 Xx 
768( 像 素 ) .1280X1024( 像 素 ) 等 情况 ,造成 所 显示 出 的 版 面 布局 会 有 出 入 。 经 常用 到 的 
版 面 布局 结构 主要 有 以 下 几 种 。 


1. 工 结 构 布 局 


工 结构 布局 的 页 面 顶 部 为 横 条 的 网 站 标志 和 广告 条 ,下 方 右 侧 (或 左 侧 ) 为 主 菜 单 , 左 
侧 (或 右 侧 ) 显 示 内 容 的 布局 。 因 为 菜单 条 的 背景 较 深 ,整体 效果 类 似 英文 字母 “T”, 这 是 
网 页 设计 中 使 用 得 最 为 广泛 的 一 种 布局 方式 。 这 种 布局 的 优点 是 页 面 结 构 清晰 , 主 次 分 
明 ,是 初学 者 最 容易 上 手 的 布局 方法 ;缺点 是 规矩 呆板 ,如 果 在 细节 和 色彩 上 不 注意 修饰 ， 
很 容易 让 人 “看 之 无 味 ”, 如 图 5. 1 所 示 。 


加 辆 介绍 分 为 品牌 介绍 和 性 能 介 细 ， 
们 分 别 从 不 问 的 斩 度 和 不 同 的 后 


图 5.1 T 结 构 布 局 的 网 页 


2.“ 口 ? 形 布局 

“ 口 ? 形 布局 是 一 个 形象 的 说 法 ,这 种 布局 的 页 面 一 般 上 下 各 有 一 个 广告 条 ,页 面 左 侧 
是 主 菜 单 , 右 侧 是 友情 链接 等 ,画面 中 间 是 主要 内 容 。 这 种 布局 的 优点 是 可 以 充分 利用 版 
面 ,信息 量 大 ;缺点 是 页 面 拥挤 ,不够 灵活 ,如 图 5.2 所 示 。 


图 5.2 “ 口 ? 形 布局 的 网 页 


网 站 规划 与 网 页 设计 


3.“ 三 ” 形 布 局 

“三 ” 形 布 局 多 用 于 国外 站 点 ,国内 用 得 不 多 。 特 点 是 页 面 上 横向 两 条 色 块 ,将 页 面 整 
体 分 割 为 四 部 分 , 色 块 中 大 多 放 广 告 条 。 

4. POP 布局 

POP 一 词 引 自 广告 术语 ,就 是 指 页 面 布 局 像 一 张 宣传 海报 ,以 一 张 精 美 图 片 作 为 页 
面 的 设计 主体 ,如 图 5. 3 所 示 。POP 布局 方式 常用 于 时 尚 类 站 点 。 优 点 显而易见 , 即 漂 
亮 吸 引 人 ;缺点 就 是 速度 慢 。 


图 5.3 POP 布局 的 网 页 


在 确定 好 版 面 布局 结构 后 ,继续 要 做 的 就 是 根据 内 容 调整 页 面 的 结构 。 例 如 要 考虑 
页 面 尺 寸 选择 多 大 ? 怎样 放置 网 页 元 素 ? 在 Dreamweaver 中 提供 了 四 种 主要 的 方法 用 
于 规划 和 设计 页 面 : 表格 、 层 ,框架 和 CSS 十 Div, 本 章 只 介绍 前 三 种 方式 。 


5.2 使 用 表格 排版 网 页 


表格 由 一 些 被 线条 分 开 的 单元 格 组 成 。 线 条 即 表格 的 边框 ,被 边框 分 开 的 区 域 被 称 为 
单元 格 ,数据 文字 、 图 像 等 网 页 元 素 均 可 根据 需要 放置 在 相应 的 单元 格 中 ,如 图 5.4 所 示 。 

在 网 页 中 使 用 表格 一 般 有 两 种 情况 : 一 种 是 在 需要 组 织 数据 显示 时 用 ; 另 一 种 是 在 
布局 网 页 时 用 。 当 表格 被 用 作 布 局 时 ,需要 对 表格 的 属性 进行 设置 。 


5.2.1 实例 导入 : 表格 排版 网 页 


在 网 页 设计 中 ,表格 以 简洁 明了 和 高 效 快捷 的 方式 将 网 页 设计 的 各 种 元 素 有 序 地 组 
织 在 一 起 ,使 整个 网 页 井井有条 。 
【 例 5.1】 某 电 气 工程 公司 网 站 如 图 5.5 所 示 。 在 本 实例 中 ,主要 涉及 以 下 知识 点 。 


单元 格 间距 
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0CC 交 从 为 天 到 第 天 提供 区 各 疗 昌 原 统 ， 为 开 洲 晤 大 的 水 得 力 斌 施 室 提供 拖 村 控制 素 统 及 
区 驼 全 提供 各 制 及 板 漠 生 统 ， 


OCX 验 芥 齐 主 “他 所 用 酉 、 医 沥 大 陆 ” 的 立业 方针 ， 坚 特 利 技 刘 步 ， 自 主创 新 ， 以 新 技术 
顾 用 、 亲 项 时 开 窑 、 亲 这 备 研 六 为 和 林 ， 所 新， 公司 已 经 撞 有 多 贡 轩 家 专利 入 术 ， 控 升 了 宝 笑 
自作 的 产品 技术 须 先 江 贡 及 市 声 习 争 实 力 - 


X00X 月 巷 为 全 辐 各 大 福田 成 由 配置 了 直流 、 交 条 电 传动 法 机 百 余 至 ， 产 品 远 笛 关 国 、 供 罗 
斯 、 搁 及 ， 和 有 上下、 阿 季 、 印 度 尼 否 下 等 加 家 和 姑 区 ， 邓 项 产品 菏 获 国家 及 省 市 骤 兢 萝 。 


图 5.5 表格 布局 实例 


Coy 网 站 规划 与 网 页 设计 【站 和 


(1) 该 网 页 是 较为 典型 的 工 结构 布局 的 网 页 。 

(2) 页 面 整体 布局 采用 表格 排版 方式 。 表 格 划 分 为 若干 个 单元 格 ,在 单元 格 内 插入 
网 页 元 素 。 

(3) 通过 定义 单元 格 的 背景 颜色 达到 美化 网 页 的 效果 。 

(4) 该 页 的 栏目 导航 信息 分 为 两 部 分 , 横 条 为 公司 网 站 总 的 导航 , 左 侧 竖 条 是 每 一 个 
栏目 的 导航 。 


5.2.2 插入 表格 和 编辑 表格 
表格 在 网 页 中 通常 存在 两 种 形式 : 一 是 以 独立 的 形式 存在 ;二 是 以 嵌 套 的 形式 存在 。 
1. 插入 独立 表格 


插入 独立 的 表格 一 般 有 两 种 方法 。 
方法 一 ” 单 击 “ 插 入 ” 栏 >“ 常 用 "按钮 组 一 “表格 "按钮 ,打开 “表格 ”对 话 框 设置 表格 


二 Eee > 
方法 二 ”选择 “插入 ”菜单 一 “表格 ”命令 ， RE 


弹出 “表格 "对 话 框 设置 表格 参数 ,如 图 5. 6 | 
所 示 。 这 E 妈 你 
在 “表格 "对 话 框 中 输入 以 下 参数 。 ee 


(1) 表格 的 行 数 和 列 数 。 

(2) 表格 宽度 。 宽 度 的 单位 有 两 种 ,像素 
和 百分比 。 像 素 是 一 个 绝对 值 ,一 般 最 外 层 
表格 选择 绝对 像素 , 即 整 个 页 面 的 尺寸 。 表 
格 宽度 的 大 小 与 显示 器 分 辩 率 有 关 。1024X 
768( 像 素 ) 的 分 辩 率 选择 范围 为 950 一 1007 像 
素 。 


这 里 要 强调 的 是 ,如 果 选 择 的 是 高 分 辨 a 
率 时 显示 的 页 面 尺寸 ,在 低 分 辩 率 状态 浏览 
时 会 出 现 横向 滚动 条 ,而 选择 低 分 辩 率 时 显示 时 的 页 面 尺寸 ,在 高 分 辩 率 状态 浏览 时 会 出 
现 较 多 的 空白 ,因此 最 外 层 表格 宽度 的 选择 必须 慎重 。 百 分 比 是 指 表格 的 宽度 与 浏览 器 
界面 之 间 相 对 百分比 或 指 训 套 表格 与 表格 之 间 相 对 百分比 。 

注意 ; 一 般 ,最 外 层 表格 将 采用 像素 设置 宽度 ;内 总 表 格 采 用 百分比 设置 宽度 。 

(3) 边框 粗细 。 如 果 表 格 是 用 来 布局 页 面 的 ,边框 粗细 值 应 设 为 0。 

(4) 单元 格 边 距 。 设 置 单元 格 内 容 与 单元 格 边缘 之 间 的 距离 。 

(5) 单元 格 间距 。 设 置 表格 单元 格 之 间 的 距离 。 

(6) 标题 。 选 择 一 种 表格 标题 格式 以 及 标题 所 在 的 位 置 等。 

(7) 辅助 功能 。 比 如 给 表格 设置 标题 以 及 摘要 等 。 

设置 完毕 后 , 单 击 * 确 定 "按钮 , 即 可 在 指定 位 置 插入 一 个 表格 ,插入 后 表格 处 于 被 先 
中 状态 ,如 图 5.7 所 示 。 
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图 5.7 插入 的 表格 


2. 插入 谋 套 表格 


在 网 页 中 为 了 保证 各 部 分 内 容 之 间 的 相对 独立 性 ,而 不 会 因为 编辑 内 容 的 同时 其 他 
内 容 被 修改 ,表格 的 嵌 套 形式 在 网 页 中 普遍 存在 。 一 般 网 页 有 一 个 大 的 外 层 表格 , 按 区 域 
划分 为 若干 单元 格 , 然 后 在 区 域 单元 格 中 再 插入 说 套 表格 ,这样 各 区 域 的 排版 既 规 范 又 灵 
活 。 其 操作 步骤 如 下 。 

将 光标 放 在 表格 的 某 个 单元 格 内 ,再 单 击 * 插 入 ?” 栏 一 常用 "按钮 组 一 表格 ?按钮 , 搬 
入 相应 表格 ,如 图 5. 8 所 示 。 


图 5.8 获 套 表格 


3. 编辑 表格 


1) 增加 行 与 列 
方法 一 ”光标 放 在 单元 格 内 , 右 击 ,从 弹出 的 快捷 菜单 中 选择 “表格 ”一 “插入 行 "/* 插 


入 列 "( 或 “插入 行 或 列 ”) 命 令 , 则 在 当前 单元 格 国 
的 上 方 插入 一 行 ,或 在 当前 单元 格 右 侧 插入 一 插入: G 隆 国 
列 , 如 果 选 择 “ 插 入 行 或 列 "命令 , 则 弹出 “插入 行 ee | 


或 列 ” 对 话 框 ,在 其 中 设置 在 表格 中 要 添加 的 行 位 置 : 个 所 选 之 上 的) 
数 或 列 数 以 及 插入 位 置 , 单 击 “确定 ”按钮 ,如 el CT 
图 5.9 所 示 。 图 5.9 “插入 行 或 列 "对 话 框 
方法 二 将 光标 放 在 单元 格 内 ,选择 “修改 ” 
菜单 “表格 "~“ 插 入 行 "/* 插 入 列 "( 或 插入 行 或 列 ) 命 令 。 
方法 三 ”将 光标 放 在 单元 格 内 ,选择 “插入 ”菜单 “表格 对 象 *>>“ 在 上 方 插 入 行 ”/ 
“在 下 方 插 入 列 ”( 或 是 “在 左边 插入 列 ”/* 在 右边 插入 列 ”) 命 令 , 则 在 当前 单元 格 的 上 方 或 
下 方 插 入 一 行 ,或 在 当前 单元 格 的 左 侧 或 右 侧 插入 一 列 。 
方法 四 ”将 光标 放 在 单元 格 内 , 单 击 “ 插 入 ” 栏 一 “布局 ”按钮 组 一 “在 上 面 插入 行 (在 
下 面 插入 行 /在 左边 插入 列 /在 右边 插入 列 )” 按 钮 , 则 在 单元 格 的 上 方 / 下 方 插入 一 行 ,或 
是 在 左边 /右边 插入 列 。 
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2) 删除 行 或 列 

方法 一 ”光标 放 在 单元 格 内 ,选择 “修改 " 莱 单 ~ 表格 ”删除 行 ”或 “删除 列 ”) 命 
令 , 删 除 当前 行 (或 当前 列 ) 。 

方法 二 ”光标 放 在 单元 格 内 , 右 击 , 在 弹出 的 快捷 菜单 中 选择 “表格 ”删除 行 ” 或 
“删除 列 ”) 命令 , 则 删除 当前 行 (或 当前 列 ) 。 

方法 三 ”选中 行 或 列 , 按 Del 键 。 

3) 排序 表格 

当 创 建 表格 并 向 表格 中 添加 数据 后 ,这 些 数据 可 能 是 杂乱 无 序 的 。Dreamweaver 中 
提供 了 排序 表格 功能 。 操 作 步 又 如 下 。 

选中 表格 ,选择 “命令 "菜单 “排序 表格 "命令 ,弹出 “排序 表格 "对话 框 ,如 图 5. 10 所 
示 , 根 据 需 要 进行 相关 参数 设置 ,最 后 单 击 “ 确 定 ” 按 钮 。 
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图 5.10 “排序 表格 "对 话 框 


4. 导入 与 导出 表格 数据 


Dreamweaver 提供 了 与 外 界 数据 交换 的 功能 。 在 其 他 程序 中 创建 的 数据 ,例如 
Excel 电子 表格 数据 、Word 文档 或 是 文本 文件 ,可 以 导入 到 Dreamweaver 中 并 格式 化 为 
表格 。 同 样 ,也 可 以 将 网 页 中 的 表格 导出 为 其 他 格式 的 文件 。 

1) 导入 表格 数据 

方法 一 ”选择 “文件 ”菜单 一 “导入 ”一 “表格 式 数据 ”命令 (也 可 导入 Word 文档 、 
Excel 文档 或 选择 “XML 到 模板 ”命令 )。 

方法 二 选择 “插入 ? 莱 单 “表格 对 象 "导入 表格 式 数 据 ? 命 令 ,弹出 “导入 表格 式 
数据 ”对 话 框 ,如 图 5. 11 所 示 。 选 择 数据 文件 的 路 径 ,并 进行 相关 参数 的 设置 , 单 击 “ 确 
定 ” 按 钮 。 

2) 导出 表格 数据 

将 光标 放 在 要 导出 表格 的 任意 单元 格 内 ,选择 “文件 ”菜单 一 导出 ”一 “表格 ?命令 , 弹 
出 “导出 表格 ?对 话 框 , 如 图 5. 12 所 示 。 设 置 “ 定 界 符 ” 和 "换行 符 ”, 单 击 * 导 出 ?按钮 ,弹出 
“表格 导出 为 ”对 话 框 ,在 此 选择 文件 路 径 和 输入 文件 名 称 , 最 后 单 击 “ 保 存 ” 按 钮 。 
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图 5.11 “导入 表格 式 数据 "对 话 框 图 5.12 “导出 表格 "对 话 框 


5.2.3 表格 及 单元 格 属性 设置 


1. 表格 属性 设置 


要 对 表格 进行 属性 设置 ,必须 首先 选中 表格 ,选中 表格 的 常用 方法 有 以 下 四 种 。 
方法 一 ”将 光标 置 于 表格 内 , 单 击 文档 窗口 左下 角 的 二 table 二 标签 选中 整个 表格 。 
方法 二 ”将 光标 指针 移动 到 表格 的 边框 处 , 单 击 选中 表格 。 

方法 三 ”将 光标 置 于 表格 内 ,选择 “修改 "菜单 一 “表格 ”>“ 选 择 表格 ”命令 ,选中 表格 。 
方法 四 ”将 光标 置 于 表格 内 , 右 击 ,在 弹出 的 快捷 菜单 中 选择 “表格 ”一 “选择 表格 " 命 
令 , 选 中 表格 。 

选中 表格 后 ,在 “属性 ”面板 中 设置 表格 的 属性 ,如 图 5. 13 所 示 。 
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图 5.13 表格 属性 的 设置 


其 中 各 项 属性 的 功能 如 下 。 

表格 : 设置 表格 的 名 称 。 

行 与 列 : 设置 表格 的 行 数 和 列 数 。 

宽 : 设置 表格 宽度 ,单位 为 像素 或 百分比 。 

间距 : 设置 单元 格 之 间 的 间隔 , 即 单元 格 间 距 。 
填充 : 设置 单元 格 内 容 与 单元 格 边缘 之 间 的 距离 。 
边框 : 设置 表格 边框 的 宽度 ,单位 为 像素 。 表 格 用 于 排版 时 ,一 般 将 边框 设置 为 0。 
对 齐 : 表格 在 页 面 中 的 对 齐 方式 。 

: 为 选 定 对 象 加 入 CSS 样式 。 

: 清除 所 设置 的 列 宽 。 

: 清除 所 设置 的 行 高 。 

: 设置 列 宽 的 单位 为 像素 。 

: 设置 列 宽 的 单位 为 百分比 。 
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2. 单元 格 属 性 的 设置 


将 光标 放 在 单元 格 内 ,在 “属性 ”面板 中 设置 单元 格 属性 ,如 图 5. 14 所 示 。“ 属 性 ” 面 
板 此 时 分 为 上 、 下 两 部 分 ,上 半 部 分 可 设置 单元 格 中 的 文本 属性 ,下 半 部 分 设置 单元 格 属 
性 。 在 设置 单元 格 文本 属性 时 ,又 分 为 HTML 选项 和 CSS 选项 。 
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图 5.14 单元 格 属性 的 设置 


图 5. 14 中 ,单元 格 各 项 属性 的 功能 如 下 。 
水 平和 垂直 : 设置 单元 格 中 网 页 元 素 的 水 平 及 垂直 的 对 齐 方式 ,如 图 5. 15 Ca) 和 
图 5.15(b) 所 示 。 


A | A 


(a) 默认 对 齐 方 式 : 水 平 左 对 齐 、 垂直 居中 (b) 对 齐 方式 : 水 平 居中 、 垂 直 顶 端 
图 5.15 对 齐 方式 


宽 和 高 : 用 于 设置 单元 格 的 宽度 和 高 度 ,单位 默认 为 像素 ;在 数值 后 若 输入 “%”, 即 
采用 百分比 为 单位 。 也 可 将 鼠标 放 在 单元 格 的 边框 处 直接 拖 动 , 以 此 改变 行 高 和 列 宽 。 

“不 换行 复 选 框 : 选中 此 选项 可 防止 换行 。 为 设置 单元 格 中 的 所 有 文本 都 在 一 行 
上 ,单元 格 宽度 会 随 之 变 宽 ;不 选 此 选项 , 当 单元 格 中 的 文本 内 容 超过 单元 格 宽度 时 则 自 
动 换行 ,单元 格 宽度 不 变 。 

“标题 " 复 选 框 : 将 所 选 的 单元 格 设置 为 表格 标题 单元 格 。 该 单元 格 中 文本 内 容 默 认 
为 粗 体 居中 。 

背景 颜色 : 设置 单元 格 的 背景 颜色 。 

剧 : 合并 所 选单 元 格 。 

强 : 拆 分 所 选单 元 格 为 行 或 列 。 


5.2.4 使 用 表格 排版 网 页 


表格 是 能 将 网 页 元 素 按 设 计 者 要 求 的 方式 显示 的 一 种 排版 技术 。 通 过 单元 格 的 拆 
分 、 合 并 以 及 在 单元 格 中 插入 嵌 套 表格 等 方法 对 网 页 元 素 进行 更 细致 的 控制 。 其 操作 步 
又 大 致 如 下 。 

(1) 插入 一 个 表格 .按照 事先 考虑 好 的 版 面 设 计 将 表格 划分 为 几 个 大 的 单元 格 , 设 置 
合适 的 宽度 ,边框 设置 为 0, 使 边框 不 可 见 ; 需 要 时 可 在 单元 格 中 插入 吝 套 表格 。 同 样 , 帜 
套 表格 的 边框 也 应 设 为 0, 使 边框 不 可 见 。 


(2) 向 各 个 单元 格 中 加 入 网 页 元 素 , 编 辑 完毕 后 保存 文档 。 

使 用 表格 构造 网 页 布局 时 应 遵循 如 下 原则 。 

(1) 要 对 页 面 做 好 规划 再 执行 ,甚至 要 进行 无 数 次 的 实验 和 重复 试行 才能 制作 出 好 
的 页 面 框架 。 

(2) 从 外 向 内 工作 。 先 建立 最 大 的 表格 ,再 在 它 内 部 创建 谋 套 的 较 小 表格 。 

(3) 设置 表格 宽度 时 ,最 外 层 表 格 使 用 绝对 像素 方法 ,内 符 表 格 使 用 相对 百分比 方法 。 

例如 ,观察 如 图 5. 16 所 示 的 网 页 。 图 上 方 为 网 页 草图 ,图 下 方 是 根据 网 页 草图 插入 
的 表格 ,进行 单元 格 属性 的 设置 ,然后 在 单元 格 中 插入 网 页 元 素 。 
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根据 样 图 进行 表格 排版 


图 5.16 使 用 表格 构造 网 页 框架 


5.2.5 ”表格 排版 实例 的 制作 过 程 


本 小 节 讲 解 例 5. 1 所 举 利用 表格 进行 网 页 布局 的 制作 过 程 。 作 为 专业 的 设计 者 , 首 
先 ,要 利用 图 形制 作 软件 如 Fireworks、Photoshop 等 ,绘制 一 张 网 页 草图 ,然后 根据 网 页 
草图 利用 表格 对 网 页 进行 排版 。 本 网 页 实例 的 制作 过 程 如 下 。 

(1) 先 设计 网 页 首页 草图 ,采用 的 分 辩 率 为 1024X768( 像 素 ) ,网 页 草图 如 图 5.4 所 示 。 

(2) 创建 本 地 站 点 ,站 点 名 为 WWW ,并 在 该 站 点 的 根 目录 下 创建 images 文件 夹 , 用 
于 存储 图 像素 材 。 

(3) 新 建 一 个 网 页 ,将 其 命名 并 保存 为 index. htm, 编 辑 该 网 页 。 

(4) 单 击 “ 属 性 ”面板 中 的 “页 面 属性 ”按钮 .选择 “外 观 (CSS)” 选 项 卡 , 设 置 “ 页 面 字 
体 ” 为 “默认 字体 ”, 字 体 “ 大 小 ”为 14 像素 ,文本 颜色 ?为 黑色 (000000) ,页 边 距 均 为 0; 
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选择 “标题 /编码 ”选项 卡 ,设置 页 面 “标题 "为 X X X X 自动 化 股份 有 限 公司 ; 选 择 “ 跟 踪 图 
像 ” 选 项 卡 , 选 择 跟踪 图 像 的 路 径 为 images/ 网 页 草图 02. jpg, 透 明度 设置 为 20%, 单 击 
“确定 ”按钮 ,如 图 5. 17 所 示 。 
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图 5.17 选择 跟踪 图 像 


(5) 单 击 “ 插 入 ” 栏 一 “常用 ”按钮 组 一 “表格 ”按钮 ,插入 居中 排列 的 多 个 表格 ,表格 宽 
度 统一 为 920 像素 。 

(6) 第 一 个 表格 为 两 列 。 在 第 一 个 单元 格 中 插入 logo 图 标 ,第 二 个 单元 格 中 插入 恋 
套 表 格 , 输 入 文本 。 

(7) 第 二 个 表格 为 三 列 。 在 中 间 单 元 格 插入 导航 文本 ,左右 两 侧 单元 格 插入 带 圆 弧 
的 小 图 片 。 

(8) 第 三 个 表格 为 一 列 , 插 入 一 幅 宽 为 920 像素 的 图 像 。 

(9) 第 四 个 表格 ,为 三 列 。 在 左 侧 单元 格 中 赃 套 一 个 多 行 表格 ,然后 插入 图 像 和 文 
本 ,中 间 单 元 格 为 空白 ,起 到 分 界 的 作用 ;将 右 侧 单元 格 拆 分 为 多 行 ,然后 插入 文本 和 图 
像 ,如 图 5. 18 所 示 。 
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图 5.18 表格 排版 过 程 
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(10) 最 下 方 的 表格 ,插入 版 权 信 息 以 及 网 站 的 备案 编号 等 。 
保存 网 页 , 按 快捷 键 F12, 浏 览 并 检查 网 页 ,结果 如 图 5.5 所 示 。 


5.3 ”使 用 层 排版 网 页 


除了 表格 以 外 , 层 是 另外 一 种 定位 网 页 元 素 的 方法 。 它 可 以 包含 文字 、 图 像 表 格 , 插 
件 , 甚 至 其 他 层 。 一 个 网 页 中 可 以 含有 多 个 层 。 层 的 特点 在 于 各 个 层 之 间 可 以 重 倒 ,可 以 
决定 每 个 层 是 否 可 见 ,还 可 以 定义 各 个 层 之 间 的 层次 关系 。 层 可 以 转换 成 表格 ,通过 与 
Dreamweaver 内 部 行为 的 结合 ,能 够 实现 动态 交互 效果 。 本 节 介 绍 层 的 概念 和 排版 方 
法 ,并 通过 一 个 实例 说 明 如 何 利用 层 进行 页 面 布局 的 设计 。 


5.3.1 实例 导入 : 层 排版 网 页 


【 例 5.2〗 八 珍 食 府 网 站 首页 如 图 5. 19 所 示 。 本 网 页 实例 采用 了 层 排版 网 页 技术 ， 
利用 Dreamweaver 内 部 行为 制作 了 网 页 动态 效果 。 


图 5.19 层 排版 的 网 页 实例 


在 本 实例 中 ,主要 涉及 以 下 知识 点 。 

(1) 以 层 作为 页 面 布局 的 工具 ,设置 层 的 背景 颜色 .大 小 及 位 置 。 
(2) 调整 层 与 层 间 的 相对 关系 ,通过 “2Z” 值 设置 层 的 番 放 顺序 。 
(3) 向 屋内 添加 图 像 .Flash 动画 、 文 本 、 表 格 等 网 页 元 素 。 

(4) 利用 Dreamweaver 内 部 行为 制作 网 页 动态 效果 。 


5.3.2 插入 层 和 编辑 层 
1. 插入 层 


在 Dreamweaver 中 ,插入 层 的 方法 有 多 种 ,常用 的 方法 有 以 下 两 种 。 
方法 一 ”将 光标 放置 在 需要 插入 层 的 位 置 ,选择 “插入 ”菜单 “布局 对 象 >“AP 
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Div” 命 令 , 可 在 文档 窗口 中 插入 一 个 空 的 预 设 大 小 的 层 , 如 图 5. 20 所 示 。 
方法 二 单 击 “ 插 入 ” 栏 一 “布局 ”按钮 组 >“ 绘制 AP Div” 按 钮 ,如 图 5. 21 所 示 ,移动 
光标 到 文档 窗口 , 当 光 标 变 成 十 字形 状 时 , 单 击 鼠标 并 拖 动 , 即 创建 了 层 。 


i 修改 0 格式 (0) 命令 (C) 站 点 (5) 窗口 (0) 帮助 
标签 (6) CtrltE 


图 像 了 I) CtrltAttI 
图 过 对 象 (6) » 
媒体 加) 和 
囊 格 部) CtrltALttT 
表格 对 象 A) » | 
Div 标签 四 ) 
表单 中) » 
Spry 菜单 栏 0) 
超级 涟 按 中 ) - 
电子 邮件 拓 接 0) Sr “绘制 AP Div 按钮 
命名 钳 记 0 ceaakattA S977 拆 查 式 
加 Spry 可 折 要 面板 C5) J 
服务 器 请 包括 B) 
注释 吕 ) | 钨 区 加 区 | 国 
图 5.20 用 “插入 ”菜单 的 命令 插入 层 图 5.21 用 “插入 ” 栏 插入 层 


在 绘制 层 的 同时 , 按 下 Ctrl 键 ,可 连续 创建 多 个 层 。 

创建 一 个 层 后 ,在 文档 窗口 中 会 出 现 一 个 “ 层 锚 记 ” 哺 标 记 , 单 击 “ 层 锚 记 ”标记 选中 
层 ,如 图 5. 22 所 示 。 如 果 在 文档 中 没有 显示 层 锚 记 , 则 单 击 “ 编 辑 " 菜 单一“ 首选 参数 ” 命 
令 , 弹 出 “首选 参数 "对话 框 ,在 “分 类 ”列表 中 选择 “不 可 见 元 素 ” 类 ,再 选中 “AP 元 素 的 锚 
点 " 复 选 框 , 单 击 “ 确 定 ” 按 钮 即 可 。 


Untitled-1* 
时 jj 代码 | 本 拆 分 | 雪 设 it | 标题 : 元 标题 文档 


[Goav> [NJ oo vavi RAT 各 


图 5.22 文档 中 插入 的 层 


2. 层 的 关系 


如 果 两 个 层 有 交叉 , 则 它们 存在 两 种 关系 : 重 释 或 嵌 套 。 重 和 至 就 是 位 置 上 有 重 又 ,但 
两 个 层 是 独立 的 ,一 个 层 发 生变 化 时 ,不 影响 另外 一 个 层 ; 而 嵌 套 时 , 子 层 会 随 着 父 层 的 某 
些 属性 的 变化 而 变化 ,而 父 层 不 随 子 层 发 生变 化 。 


3. 创建 议 套 层 


层 的 嵌 套 和 表格 的 嵌 套 类 似 , 就 是 在 层 里 面 再 建立 一 个 层 。 创 建 谋 套 层 的 方法 如 下 : 
将 光标 放 在 当前 层 中 ,选择 “插入 ”菜单 一 “布局 对 象 ?> 一 “AP Div ”命令 , 即 创建 了 一 
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4. 层 的 属性 设置 


设置 层 的 属性 时 ,首先 要 选中 层 。 选 中 层 的 常用 方法 有 以 下 三 种 。 

方法 一 ” 单 击 层 边 框 线 。 

方法 二 单 击 层 锚 记 。 

方法 三 。” 单 击 “窗口 "菜单 “AP 元 素 ” 命 令 , 打 开 “AP 元 素 ” 面 板 , 单 击 “AP 元 素 ” 面 
板 上 的 层 名 称 。 

当 层 被 选中 后 ,周围 出 现 控 制 柄 , 层 边框 变 为 蓝 色 显示 。 要 同时 选择 多 个 层 , 按 下 
Shift 键 ,连续 单 击 要 选择 的 层 即 可 。 选 中 层 后 ,通过 “属性 ”面板 对 其 进行 设置 ,如 图 5. 23 
所 示 。 


属性 
CS 元 素 在 四 | 144p] 袖 轨 [256pz 。 项 四 上] 至 景 图 缠 00)[ 
Divil 关上 mi[ 96px] 商 00| 168px| 可 见 性 W) | aecwat。 滞 | 背景 缠 色 5) 三, 


| 
加 -一半 [一 


图 5.23 层 的 属性 设置 


其 中 各 项 属性 的 功能 如 下 。 

层 编 号 : 定义 当前 层 的 名 字 。 

左 ` 上: 设置 层 在 页 面 或 在 其 父 层 中 左边 和 顶部 的 距离 ,单位 为 像素 。 

宽 、 高 : 设置 层 的 宽度 和 高 度 。 

Z 轴 : 设置 当前 层 在 多 层 释放 中 的 顺序 , 层 的 Z 值 越 大 , 层 的 位 置 越 在 上 方 。 

可 见 性 : 确定 初始 化 时 层 是 否 显示 。 其 中 有 四 种 取 值 ,inherit 表示 继承 父 层 的 可 见 
性 属性 ;visible 表示 显示 层 的 内 容 , 而 不 管 其 父 层 是 否 可 见 ;hidden 表示 隐藏 层 的 内 容 ， 
而 不 管 其 父 层 是 否 可 见 ;default 表示 大 多 数 浏览 器 会 将 其 解释 为 inherit, 即 继承 父 层 的 
可 见 性 属性 。 

背景 图 像 和 背景 颜色 : 设置 层 的 背景 图 像 和 背景 颜色 。 

溢出 : 用 于 设置 当前 层 的 内 容 超出 层 的 大 小 范围 后 产生 的 结果 。 其 中 有 四 种 取 值 : 
visible 表示 当 层 中 包含 的 内 容 超 出 层 时 , 层 自动 向 下 及 向 右 扩 大 层 的 尺寸 以 容纳 并 显示 
层 中 的 所 有 内 容 ;hidden 表示 保持 层 的 尺寸 不 变 ,隐藏 超出 的 部 分 , 且 不 提供 滚动 条 ; 
scroll 表示 在 层 中 加 入 滚动 条 ,无 论 层 的 内 容 是 否 超出 层 的 范围 1auto 表示 层 中 的 内 容 超 
过 层 时 自动 添加 滚动 条 。 

“剪辑 ”选项 组 的 “ 左 \ 右 、 上 、 下 ”: 用 于 设置 4 个 剪裁 角 的 坐标 ,对 层 进行 剪裁 操作 。 


5. 层 的 操作 


1) 层 的 移动 
选中 层 , 拖 动 到 合适 的 位 置 即 可 。 
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2) 层 的 对 齐 

选中 多 个 层 , 选 择 “ 修 改 " 菜 单一 “排列 顺序 ”一 某 个 对 齐 方式 命令 。 对 齐 方式 有 左 对 
齐 、 右 对 齐 、 对 齐 上 缘 、 对 齐 下 缘 等 ,如 图 5. 24 所 示 。 

注意 : 设 定 层 的 对 齐 方式 时 ,以 最 后 一 个 选中 的 层 的 上 、 下 、 左 、 右 边界 为 对 齐 参 考点 。 


| 只 


图 5.24 层 对 齐 方式 : 对 齐 上 缘 


3) 改变 层 的 顺序 

当 网 页 中 出 现 多 个 层 时 ,就 会 出 现 重 倒 现象。 而 层 的 倒 放 顺序 会 影响 其 显示 效果 。 
改变 层 倒 放 顺 序 的 常用 方法 有 以 下 两 种 。 

方法 一 ”选中 层 , 在 “属性 ?面板 的 “Z 轴 " 文 本 框 中 输入 数值 来 决定 层 的 释放 顺序 。 
其 值 越 大 越 靠 上 ,如 果 其 为 负 值 ,表示 层 位 于 页 面 之 下 ,页 面 中 的 内 容 将 会 覆盖 层 中 的 
内 容 。 

方法 二 ”在 “AP 元 素 ” 面 板 中 双击 Z 轴 的 值 ,修改 此 值 。 

4) 显示 和 隐藏 层 

利用 层 可 显示 和 隐藏 的 特性 ,结合 Dreamweaver 内 部 行 
为 能 够 实现 网 页 中 动态 交互 效果 。 常 用 方法 有 以 下 两 种 。 

方法 一 ”选中 层 ,在 “属性 ”面板 中 , 单 击 层 的 “可 见 性 ”下 
拉 列 表 的 值 ,选择 visible( 显 示 , 默 认 ) 或 hidden( 隐 藏 ) 。 

方法 二 ”选中 层 ,选择 “窗口 "菜单 “AP 元 素 ” 命 令 , 打 
开 “AP 元 素 ” 面 板 , 单 击 “AP 元 素面 板 上 的 眼睛 图 标 , 眼 睛 
睁 开 为 显示 层 , 眼 睛 闭 上 为 隐藏 层 ,无 眼睛 图 标 表 示 可 见 性 为 
默认 ,如 图 5. 25 所 示 。 


6. 层 与 表格 的 相互 转换 


图 5.25 层 的 显示 与 隐藏 


由 于 层 所 具有 的 灵活 性 是 表格 所 无 法 比拟 的 ,因此 可 以 通过 在 层 中 添加 内 容 , 使 其 布 
局 在 页 面 中 任何 位 置 .而 且 不 会 使 其 他 页 面 元 素 受 到 影响 ,但 由 于 它 缺乏 紧凑 性 ,在 不 同 
浏览 器 显示 ,可 能 会 发 生 层 的 位 置 偏 移 ,因此 ,Dreamweaver 提供 了 层 与 表格 互相 转换 功 
能 ,以 结合 各 自 的 优点 更 好 地 进行 网 页 设计 操作 。 

1) 层 转 换 为 表格 

选择 “修改 ”菜单 一“ 转换 ”一 “将 AP Div 转换 为 表格 ”命令 ,弹出 “将 AP Div 转换 为 
表格 ”对 话 框 ,如 图 5. 26 所 示 , 设 置 相应 的 选项 。 

注意 : 网 页 中 的 层 如 果 有 重 胎 则 不 能 进行 转 搁 为 表格 的 操作 。 


层 转换 为 表格 的 相关 设置 有 如 下 几 项 。 
。 选择 “最 精确 ” 单 选 按钮 ,将 采取 尽 可 


将 ap Div 转换 为 表格 
表格 布局 : @) 景 精确 0) 


能 精确 的 方式 进行 转换 。 OR sie 
。 选择 “最 小 ” 单 选 按钮 ,在 转换 时 可 和 忽 Be 
略 几 个 像素 内 的 误差 ee 


口 显 示 业 元 素面 板 A) 
口 显示 网 格 (9) 
口 靠 齐 到 网 格 0) 


。“ 使 用 透明 GIFs” 复 选 框 是 指 用 透明 
的 GIF 填充 表 的 最 后 一 行 ,这 将 确保 
该 表 在 所 有 浏览 器 中 以 相同 的 列 宽 
显示 。 

。“ 置 于 页 面 中 央 ” 复 选 框 是 指 转换 后 的 表格 是 否 自动 居中 。 

2) 表格 转换 为 层 

若 要 将 表格 转换 为 层 ,选择 “修改 ”菜单 一 “转换 ”一 “将 表格 转换 为 AP Div” 命 令 

即 可 。 


5.3.3 使 用 层 排 版 网 页 的 制作 过 程 


本 小 节 讲 解 例 5. 2 所 举 利用 层 技术 进行 网 页 布局 的 制作 过 程 。 将 此 网 页 分 辩 率 设置 
为 1024X768( 像 素 ) ,此 网 页 共 创 建 了 4 个 层 相互 重 释 ,制作 过 程 如 下 。 

(1) 创建 本 地 站 点 ,站 点 名 为 myweb, 在 站 点 内 创建 一 个 images 文件 夹 , 将 图 像 和 
Flash 动画 素材 存储 在 此 文件 夹 中 。 

(2) 在 站 点 根 文件 夹 下 新 建 一 个 网 页 ,将 其 保存 为 index. htm, 在 “文档 ”工具 栏 的 “ 标 
题 "文本 框 中 输入 “ 八 珍 美食 ,天 天 美食 "。 选 择 “ 修 改 " 菜 单一 “页 面 属性 ”命令 ,打开 “页 面 
属性 ?对 话 框 , 在 “外 观 (CSS) "选项 卡 中 ,设置 页 面 的 背景 图 像 为 images/main_bg. gif。 

(3) 单 击 “ 插 入 ” 栏 一 “布局 ”按钮 组 一 “绘制 AP Div” 按 钮 ,将 光标 移 到 文档 窗口 , 当 光 
标 形状 变 成 十 字形 指针 时 , 按 下 Ctrl 键 , 连 续 绘 制 4 个 层 , 相 对 位 置 及 顺序 关系 如 图 5. 27 


所 示 。 
请 
| wm | 


AP Div3 


图 5.26 “将 AP Div 转换 为 表格 ”对话 框 


图 5.27 连续 绘制 多 个 层 


(4) 选中 第 1 层 (AP Div1) ,在 “属性 ”面板 中 设置 层 的 “ 左 ” 和 “上 ” 均 设置 为 0。 光 标 
在 第 1 层 内 单 击 一 下 ,光标 在 层 内 闪烁 , 单 击 * 插 入 ? 栏 一 "常用 ”按钮 组 -一 媒体 "按钮 组 一 
swf 按钮 ,插入 Flash 动画 为 images/main_image. swf, 选 中 swf 文件 ,在 “属性 ”面板 中 设 
置 为 背景 透明 。 

(5) 选中 第 2 层 (AP Div2) ,移动 层 ,调整 层 的 位 置 。 光 标 在 第 2 层 内 单 击 一 下 , 单 击 
“插入 ” 栏 一 “布局 ”按钮 组 一 “表格 ”按钮 ,插入 一 个 1 行 3 列 , 宽 度 为 100% 的 表格 ,在 单 
元 格 中 分 别 插入 三 幅 菜品 图 像 。 

(6) 光标 在 第 3 层 (AP Div3) 内 单 击 一 下 ,然后 输入 如 图 5. 28 所 示 文 本 。 

(7) 光标 在 第 4 层 (AP Div4) 内 单 击 一 下 ,插入 logo 图 标 , 如 图 5. 28 所 示 。 


图 5.28 向 层 内 插入 网 页 元 素 


保存 网 页 。 按 快捷 键 F12 ,浏览 并 检查 网 页 效果 。 


5.4 使 用 内 部 行为 制作 网 页 交互 特效 


5.4.1 应 用 Dreamweaver 内 部 的 行为 
1. 行为 的 概念 


行为 主要 由 三 部 分 组 成 : 对 象 .事件 和 动作 。 

对 象 是 行为 的 主体 ,在 网 页 中 的 对 象 主要 有 文本 、 图 像 .窗口 等 。 

事件 是 针对 某 一 对 象 所 执行 的 特定 的 操作 。 如 当 鼠 标 指针 指向 超 链接 时 ,会 生成 一 
个 OnMouseOver 事件 ; 当 单 击 超 链接 时 ,会 生成 一 个 OnClick 事件 。 不 同 的 对 象 通常 会 
产生 不 同 的 事件 。 

动作 主要 由 JavaScript 编写 的 实现 特定 功能 的 代码 组 成 。 一 旦 动作 与 某 一 特定 事件 
关联 , 则 当 产 生 事件 的 同时 会 触发 相应 的 动作 ,以 实现 特定 的 功能 。 比 如 ,要 在 窗口 载 入 
(OnLoad) 的 过 程 中 打开 新 的 窗口 , 则 可 以 将 OnLoad 事件 与 打开 新 窗口 的 动作 相关 联 。 
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2. Dreamweaver 的 内 部 行为 

Dreamweaver 内 置 的 行为 有 多 种 ,可 通过 “行为 "选项 卡 查看 。 选 择 “ 窗 口 ” 菜 单一 
“行为 "命令 ,打开 “标签 检查 器 ”面板 的 “行为 ”选项 卡 ,如 图 5. 29 所 示 。 以 下 对 几 种 常用 
的 行为 进行 介绍 。 

1) 调用 JavaScript 

(1) 在 文档 窗口 中 输入 文本 “关闭 窗口 ”, 将 其 选中 ,在 “属性 ”面板 的 “ 超 链 接 " 文 本 框 
内 输入 "# ”, 即 为 文本 添加 空 链 接 。 

(2) 选中 文本 ,然后 选择 “窗口 "菜单 一“ 行为 "命令 ,打开 “标签 检查 器 ”面板 ,如 图 5. 29 
所 示 。 单 击 * 行 为 ”选项 卡 的 “添加 行为 "按钮 三 ,从 弹出 的 菜单 中 选择 “调用 JavaScript” 
命令 ,如 图 5. 30 所 示 , 弹 出 “调用 JavaScript” 对 话 框 ,如 图 5. 31 所 示 , 输 入 要 执行 的 
JavaScript 代码 “window. close()”。 代 码 的 含义 是 “关闭 浏览 窗口 ”, 单 击 “ 确 定 ” 按 钮 , 返 
回 “ 行 为 ”选项 卡 。 如 果 要 删除 已 设置 的 某 个 行为 , 则 选中 行为 , 单 击 * 删 除 动作 ”按钮 | -|。 


图 5.31 “调用 JavaScript” 对 话 框 


(3) 在 “行为 "选项 卡 中 , 单 击 国 ] 按 钮 选择 事件 为 OnClick( 单 击 ) ,如 图 5. 32 所 示 。 

保存 网 页 , 按 快捷 键 F12 浏览 网 页 。 当 用 户 单 击 “ 关 闭 窗口 ”时 ,就 会 弹出 信息 框 , 询 
问 用 户 是 否 关闭 窗口 ,如 图 5. 33 所 示 。 

2) 弹出 信息 

“弹出 信息 ”通常 用 于 定义 当 用 户 实施 了 某 个 事件 后 ,会 弹出 提示 信息 框 。 例 如 在 
例 5. 2 中 , 单 击 logo 图 标 时 将 弹出 问候 信息 框 .其 操作 步骤 如 下 。 


到 ED [个 ] heyWWoyieocachary/qche/untted 避 | | 加] 苇 到 | 三 接 习 
关闭 窗口 加 


您 查看 的 网 页 正在 试图 关闭 窗口 。 
5 是 否 关闭 此 窗口? 


图 5.32 为 对 象 选 择 事件 图 5.33 JavaScript 行为 的 执行 
(1) 单 击 如 图 5. 28 所 示 logo 图 标 ,在 “标签 检查 器 "面板 的 “行为 ”选项 卡 中 单 击 “ 添 加 
行为 ”按钮 本 ,在 弹出 的 菜单 中 选择 “弹出 信息 ”命令 ,弹出 “弹出 信息 ”对 话 框 ,如 图 5. 34 所 
示 。 在 此 输入 要 显示 的 文字 “欢迎 光临 八 珍 食 府 1”, 然 后 单 击 “ 确 定 ” 按 钮 。 


消息 -| 下 六 八 珍 食 府 ? 


图 5.34 “弹出 信息 ”对 话 框 


(2) 在 “行为 ?选项 卡 中 ,选择 事件 为 Onclick。 

保存 网 页 , 按 快捷 键 F12 ,浏览 并 检查 网 页 。 当 单 击 logo 时 ,将 弹出 一 个 信息 框 , 提 
示 “ 欢 迎 光临 八 珍 食 府 1”"。 效 果 如 图 5. 19 所 示 。 

3) 设置 文本 

“设置 文本 ”包括 四 项 内 容 : 设置 层 文本 设置 文本 域 文字 ,设置 框架 文本 、 设 置 状 态 
栏 文本 ,分 别 可 以 为 层 \. 文 本 域 ,框架 和 状态 栏 等 对 象 添加 文本 信息 。 下 面 以 给 网 页 设置 
状态 栏 文本 为 例 讲 解 , 其 操作 步骤 如 下 。 

(1) 单 击 “ 标 签 ”选择 栏 中 二 body 二 标签 ,在 “标签 检查 器 ”面板 的 “行为 ”选项 卡 中 单 
击 “ 添 加 行为 ”按钮 计 ,, 在 弹出 的 菜单 中 选择 “设置 文本 ”一 “设置 状态 栏 文本 ”命令 ,弹出 
“设置 状态 栏 文本 ”对 话 框 ,如 图 5.35 所 示 。 在 对 话 框 中 输入 文字 “Welcome to my 
Website!”, 单 击 “ 确 定 ” 按 钮 退出 。 


EE] 
清和 elcone to ny Website! 到 EE | 
注意 -并 丰 所 有 洲 必 器 都 支 持 更 玖 村 态 术 文本 ， 某 毕 洲 必 mW | 

若 全 根据 用 户 首选 多 雪 示 确定 是 否 允 许 此 功能 。 


图 5.35 “设置 状态 栏 文本 ”对 话 框 


(2) 在 “行为 ”选项 卡 中 ,选择 事件 为 Onload。 

保存 网 页 , 按 快捷 键 F12 浏览 并 检查 网 页 ,在 状态 栏 处 有 一 行文 字 *Welcome to my 
Website!”, 

4) 打开 浏览 器 窗口 

“打开 浏览 器 窗口 ”的 功能 是 打开 网 页 的 同时 又 在 新 的 浏览 器 窗口 打开 指定 的 网 页 。 
用 户 可 以 自 定义 新 窗口 的 大 小 、 属 性 和 名 称 等 。 

下 面 以 打开 八 珍 食 府 网 站 同时 会 弹出 “ 八 珍 特价 菜 看 "宣传 网 页 为 例 讲 解 ,如 图 5. 36 
所 示 。 操 作 步 又 如 下 。 


繁 纺 之 蜂 出 举人 茎 ， 水 精 之 盘 行 素 屿 ! 
屋 答 尾 包 久 未 下 ， 兹 刀 缮 切 裤 纷 纶 | 
欢 天 光 临 八 珍 食 府 ! 


图 5.36 打开 浏览 器 窗口 


(1) 创建 一 个 页 面 ,在 页 面 中 输入 相应 的 网 页 元 素 。 将 网 页 命名 为 chuangkou. htm。 

(2) 打开 主页 , 单 击 文档 窗口 左下 角 的 二 body 二 标签 , 单 击 “ 标 签 检 查 器 ”面板 的 “ 行 
为 ”选项 卡 的 “添加 行为 ”按钮 叶 。, 在 弹出 的 菜单 中 选择 “打开 浏览 器 窗口 "命令 ,弹出 “ 打 
开 浏览 器 窗口 ?对 话 框 , 如 图 5. 37 所 示 。 

(3) 在 “要 显示 的 URL” 文 本 框 中 输入 广告 页 面 的 地 址 : chuangkou. htm。 

(4) 输入 窗口 宽度 与 高 度 值 ,单位 为 像素 ,然后 在 “属性 ?选项 组 中 选择 要 显示 在 浏览 
器 中 的 组 成 元 素 , 比 如 选中 “菜单 条 ”“ 地 址 工具 栏 ”“ 需 要 时 使 用 深 动 条 ” 复 选 框 等 ,输入 
浏览 器 “窗口 名 称 ”为 “ 八 珍 特价 菜 看 ”, 单 击 “ 确 定 ” 按 钮 。 

(5) 在 “行为 ”选项 卡 中 ,选择 事件 为 OnLoad。 设 置 完成 . 按 快捷 键 F12 浏览 并 检查 
网 页 。 

Dreamweaver 中 内 部 行为 还 有 很 多 ,这 里 不 再 一 一 介绍 。 


Co 网 站 规划 与 网 页 设计 
到 


要 显示 的 URE [chuangkou. htn 浏览 .… 确证 | 
口 宽度 :及 50 窗口 高 度 : 00 
窗口 宽度 : 和 | 


属性 : 「 导航 工具 栏 
地 址 工具 栏 


图 5.37 “打开 浏览 器 窗口 "对 话 框 


5.4.2 ”推荐 两 款 制作 网 页 特效 软件 


1. 有 声 有 色 

本 软件 是 一 款 网 页 特效 制作 工具 。 它 集合 了 360 个 十 分 精彩 的 JavaScript 小 程序 ， 
真正 做 到 了 与 特效 源 程序 相 融 合 , 每 一 个 特效 制作 窗口 均 为 可 视 化 制作 界面 ,所 有 特效 操 
作 只 需要 单 击 几 下 鼠标 就 可 以 完成 。 其 工作 界面 如 图 5. 38 所 示 。 


a: 有 声 有 色 2007 试用 版 官方 网 站 : cn.CoolBoo. co 
注意 : 此 页 “ 极 早 和 桂 效 ”必须 注册 后 才能 使 用 ， 未 注册 版 本 羽 提 供 预 宅 功 能 。 gE 
WinP 源 显 声效 菜单 内燃 兴 动 源 去 菜单 民 标 动态 施 转 文字 
打字 提示 信息 链接 如 灶 滚 动 提示 信息 Ying 右键 渐 显 菜单 
上 如 转变 水 让 文字 另类 右键 荣 音 埋 灶 链 接 
展 标 转动 星星 链接 多 彩 变 幻 文字 动 大 Xf 菜单 
柔 化 动态 光量 文字 源 显 分 数 右键 菜单 心 员 转 动 展 标 
磁 纪 文字 源 显 水 波 放大 链接 多 彩 新 变 文 字 辐 
退出 &) ] [LTw | [Lim ] [注册 @) ] 


图 5.38 ”有声有色 工作 界面 


2. 网 页 特效 精灵 

网 页 特效 精灵 是 一 款 网 页 特效 制作 工具 ,包括 可 以 自 定义 特效 和 不 可 自 定义 特效 , 适 
合 人 门 到 专家 级 使 用 。 软 件 提供 了 友好 的 界面 ,用 户 只 要 单 击 几 下 鼠标 ,就 可 以 完成 复杂 
的 特效 制作 过 程 ,其 工作 界面 如 图 5. 39 所 示 。 


网 页 特效 精灵 。 不。 AoSky.net 


| 软件 设置 ) 特效 代码 CC) ”网 页 工具 0) 软件 帮助 0 
时 间 峙 效 文字 特效 限 标 特效 窗口 特效 图 片 特效 娱乐 特效 菜单 特效 其 地 转 效 个 人 特效 


妹 委 竺 效 

球 委 特效 是 一 个 地 第 醚 的 特效 ， 加 入 后 在 您 的 网 页 顶 沉 随机 出 现 昧 车 的 委 花 。 在 

冬季 时 ， 秋 加 到 络 的 网 页 上 ， 会 结 人 一 种 彝 洁 清 界 的 印象 ; 秋季 ,可 以 可 落果 实 ,会 
给 人 一 种 热情 成 台 的 感 苋 ; 夏季 ， 可 以 味 藻 妹 叶 ， 会 给 人 一 种 充满 生机 的 喜 避 。 


图 片 于 址 :|e_\Proer w Files\ 网 页 竺 获 精 珊 \insees\snow if 
雪花 个 数 :0 | 范围 1- 多 
于 时间 : [过 请 根据 实际 效果 ,选择 不 同 的 延迟 时 间 


图 5.39 网 页 特效 精灵 工作 界面 


5.5 使 用 框架 排版 网 页 


框架 可 以 把 一 个 浏览 器 窗口 划分 为 多 个 区 域 ,每 个 区 域 显示 不 同 的 网 页 , 它 的 这 个 特 
性 使 其 成 为 一 种 常用 的 页 面 排版 技术 。 
5.5.1 实例 导入 : 框架 排版 网 页 


【 例 5.3】 框架 排版 网 页 “Xx X x X 电 子 有 限 责任 公司 ”网 站 ,如 图 5. 40 所 示 。 


xxxx 电子 商量 由 任 公司 | 本. 


WW XX KA KA RX COM 


项 


二 xxxXX XXXX 天 型 得 

交 XX 业 共有 二 由 尖 业 会 准 认 计 。 具 有 从 诸 修 、 站 可 栅 ， 久 于 范 困 帮 区 下 革 芭 吉 、 放 这 小 基尼 点 ,在 动 弯 轨 过 特 人 和 
人 | 
EE + 十 至 nC 工 计 和 100x 才 化 保 应 了 产品 的 噩 可 捍 和 从 ， 寺 志 的 于 量 保 正 伯 夭 取 知 了 主 双 TVEOLS0 诈 

证- 
三 、 关 XXX 而 新 pc/mr 本 和 


人 
的 下 析 ， 革 办 共 克 员 绎 电工 到 装 元 牢 及 记性 村 料 刘 屁 质 兴 腾 。 关 不 用 先生 用 su 技术， 以 下 先 注 和 营 审 和 人 交 二 化 而 过 为 人 


和 在 下 小 5 

志 生 作为 直子 产品 的 生 全 合 ， 基于 要 性 不 站 而 响 ， 方 了 流 呈 产品 访 全 要 。 并 其 工程 呈 们 名 是 亲 沁 电 浊 产品 兹 姑 政 、 更 
下、 更 可 冤 、 更 二 太 . 作 为 国内 首 可 专业 圭 二 小 功 丰 专 丈 和 一 商 ， 信 和 丰 公 司 洁 和 亲自 和 也 技术 名 折 ， 旋 事 在 CIT 的 光芒 
地 醒 寺 志 诅 二 中 地 赤 凋 中 才 产 !L 上 所 有 要 赤 - 
下。 该 品 s 示 雪 

从 要 训 销 种 fg 渤 品 地 器 ， 振 玫 车 江 ， 寺 汪 后 人、 日 本 FTF， 王 攻 SfAIT 丰 天 潭 呈 品 示 天 等 。 
五 、 音 片 机 仿 机 

人 和 种 20 片 机 俯视 :让 注 系 开 、 斤 训 I4、 台 Easy Ted 年。 


|< 


图 5.40 框架 排版 网 页 实例 


< 网 站 规划 与 网 页 设计 | 且 生 和 


本 实例 主要 涉及 以 下 知识 点 。 

(1) 使 用 框架 技术 布局 和 制作 网 页 。 

(2) 该 网 页 的 布局 是 一 个 包括 三 个 框架 (topframe ,leftframe ,mainframe) 的 框架 集 
frameset, 上 框架 始终 保持 不 动 , 当 浏览 者 单 击 左边 的 导航 栏 时 ,相应 的 内 容 显示 在 右边 
区 域 。 

(3) 使 用 框架 技术 的 关键 是 : 在 使 用 链接 时 ,必须 指定 链接 的 目标 位 置 。 


5.5.2 创建 与 编辑 框架 结构 

1. 框架 构成 及 设置 

一 个 框架 实际 上 是 由 多 个 HTML 文档 所 构成 的 。 其 中 一 个 页 面 专门 负责 框架 的 集 
成 ,比如 框架 是 分 行 型 .分 列 型 还 是 混合 型 ,框架 的 行 和 列 的 尺寸 如 何等 。 这 个 页 面 一 般 
被 称 为 框架 集 页 面 ,其 他 的 页 面 则 是 普通 的 HTML 文档 ,分 别 被 放置 到 框架 结构 中 ,被 
称 为 框架 页 , 当 链接 到 框架 集 页 面 的 HTML 文档 时 ,整个 框架 以 及 各 HTML 文档 就 会 
一 起 显示 在 浏览 器 中 。 

2. 创建 框架 

创建 框架 的 方法 有 很 多 种 ,常用 的 方法 有 以 下 三 种 。 

方法 一 ”启动 Dreamweaver 后 , 单 击 启动 界面 中 "新建 ”一 “更 多 ”图 标 ,弹出 “新 建文 
档 ” 对 话 框 , 单 击 “ 示 例 中 的 页 ”选项 卡 , 在 “示例 文件 夹 ”列表 中 选择 “框架 页 ”, 然 后 选择 出 
现在 右 侧 列表 框 中 的 框架 样式 ,如 图 5. 41 所 示 。 


新 建文 档 3| 
示例 文件 志 ; 
= 
BB ahem 
a 
罗 * 站 十， 上方 由 大 i 
左 全 定 ， 下 方 岂 大 A 
水 下 折 分 
| 
Dw | 首 & 数 四 .| 3 


图 5.41 创建 框架 集 


方法 二 ”选择 “文件 ”菜单 一 “新 建 "命令 ,弹出 “新 建文 档 ” 对 话 框 ,如 图 5. 41 所 示 。 
方法 三 ”首先 新 建 一 个 HTML 空白 文档 ,选择 “插入 ” 栏 一 “布局 ”按钮 组 一 “框架 ” 


按钮 组 -选择 某 个 框架 集 样式 ,如 图 5. 42 所 示 。 | -一 一 
3. 编辑 框架 口头 芝 
口 ] 顶部 框架 
用 户 可 对 已 经 创建 好 的 框架 集 进行 编辑 和 修改 ,例如 将 有 sse 
个 框架 拆 分 成 几 个 更 小 的 框架 ,或 是 移动 框架 的 边框 来 改变 框 。” 问 TEs 
架 显 示 的 范围 大 小 。 日 各 
(1) 拆 分 框架 SD HoT teR 
方法 一 。 单 击 要 拆 分 的 框架 ,选择 "修改 "菜单 一 “框架 集 "站 和 
拆 分 上 /下 / 左 / 右 命令 ,如 图 5.43 所 示 。 加 emaeesaa 


方法 二 ”以 垂直 或 水 平方 式 拆 分 一 个 框架 , 单 击 要 拆 分 的 


框架 ,将 光标 置 于 边框 位 置 , 按 下 鼠标 左 键 ,将 边框 从 文档 窗口 图 5.42 选择 框架 集 样式 


的 边缘 拖 入 文档 窗口 的 某 个 位 置 。 
(2) 删除 框架 


按 住 鼠 标 左 键 ,将 框架 的 边框 从 文档 窗口 的 某 个 位 置 拖 至 文档 窗口 的 边框 外 即 删除 


框架 。 
(3) 改变 框架 的 行 高 和 列 宽 


将 光标 置 于 文档 窗口 的 框架 边框 处 ,光标 指针 变 成 双向 箭头 , 拖 动 边框 ,可 改变 框架 


的 行 高 和 列 宽 。 
| 
ed 
框架 内 向 外 杠 
| 
框架 内 部 
图 5.43 拆 分 框架 图 5.44 在 “框架 ”面板 中 选择 框架 


4. 选择 框架 


选择 “窗口 "菜单 一 “框架 "命令 ,打开 “框架 "面板 ,如 图 5. 44 所 示 。 
在 “框架 ”面板 中 可 进行 的 操作 如 下 。 
(1) 选中 框架 : 单 击 某 个 框架 内 部 。 


(2) 选中 框架 集 : 单 击 框架 外 围 的 边框 ;或 在 文档 窗口 中 ,光标 指向 框架 边框 ,光标 


指针 变 成 双向 箭头 , 单 击 框架 边框 。 


(3) 选中 骨 套 的 框架 集 : 如 果 是 嵌 套 框架 , 单 击 框架 内 嵌 的 外 框 , 则 选中 的 是 嵌 套 的 


框架 集 。 
5. 设置 框架 属性 


1) 设置 框架 集 属性 
选中 框架 集 ,在 “属性 ”面板 中 可 以 定义 框架 集 的 属性 ,如 图 5. 45 所 示 。 
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框架 集 边框 后 ”| 边框 颜色 ， 加 || 
全 人 | 
om 


图 5.45 框架 集 属性 的 设置 


| 时 


框架 集 各 项 属性 的 功能 如 下 。 

边框 : 设置 文档 在 浏览 器 中 被 浏览 时 是 否 显示 框架 边框 。 有 三 种 取 值 :“ 是 表示 显 
示 框 架 边 框 ;* 否 ”表示 不 显示 框架 边框 ;* 默 认 ” 表 示 采 用 浏览 器 的 默认 值 。 

边框 宽度 : 用 于 设置 框架 边框 宽度 。 输 入 的 值 越 大 ,边框 越 宽 ; 若 为 0 则 表示 无 
边框 。 

边框 颜色 : 用 于 设置 框架 边框 的 颜色 。 

行列 选 定 范围 : “文档 ”窗口 被 框架 划分 成 行 与 列 , 在 行列 选择 范围 中 单 击 行 或 列 ,可 
以 设置 框架 中 行 与 列 的 尺寸 。 

行 ( 列 ): 用 于 输入 被 选中 的 子 框架 行 或 列 的 宽度 或 高 度 值 ,单位 有 百分比 、 像 素 、 相 
对 等 。 

2) 设置 框架 的 属性 

选中 某 个 框架 ,在 “属性 ”面板 中 可 以 定义 框架 属性 ,如 图 5. 46 所 示 。 


而 | 框架 名 称 。 源 文件 名 4 (四 ) /生物 科技 公司 /atitled-l 强加 边 攻 四 [ 世 认 


Pr 六 汉中 国人 习 厂 不 骆 台 大 小 四 过 相 项 BC 上 
边界 宽度 名 
边界 高 度 0 | 避 


图 5.46 框架 属性 的 设置 


框架 各 项 属性 的 功能 如 下 。 

框架 名 称 : 指定 当前 框架 名 ,该 名 称 被 用 作 设置 链接 的 目标 或 在 脚本 中 引用 框架 时 
使 用 。 

源 文件 : 指定 在 当前 框架 中 显示 的 网 页 源 文件 。 

滚动 : 设置 当 没有 足够 的 空间 显示 当前 框架 的 内 容 时 是 否 显示 滚动 条 。 有 4 种 取 
值 :“ 是 ”表示 显示 深 动 条 ;“ 否 ”表示 不 显示 深 动 条 ;“ 自 动 " 表 示 当 没有 足够 空间 来 显示 当 
前 框架 的 内 容 时 自动 显示 滚动 条 ;默认 ”表示 采用 浏览 器 的 默认 值 。 

不 能 调整 大 小 : 选中 此 复 选 框 ,可 禁止 用 户 浏览 网 页 时 通过 拖 动 框架 边框 自行 调整 
框架 的 大 小 。 

边框 : 决定 当前 框架 是 否 显示 边框 。 有 3 种 取 值 :“ 是 ”表示 显示 边框 ;“ 否 ”表示 不 显 
示 边 框 ;* 默 认 ” 表 示 采 用 浏览 器 的 默认 值 ,大 多 数 浏览 器 默认 为 “是”。 

边框 颜色 : 设置 当前 框架 边框 使 用 的 颜色 。 这 项 选择 会 覆盖 框架 集 的 边框 颜色 设置 。 

边界 宽度 : 设置 框架 中 的 内 容 与 框架 边框 的 左边 距 和 右边 距 , 以 像素 为 单位 。 

边界 高 度 : 设置 框架 中 的 内 容 与 框架 边框 的 上 边 距 和 下 边 距 ,以 像素 为 单位 。 
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所 谓 超 链 接 目标 框架 ,是 指 当 单 击 超 链接 时 , 超 链 接 的 目标 网 页 文件 在 哪个 框架 中 显 
示 。 例 如 ,对 于 一 般 左 窗 右 宽 的 列 式 框架 结构 ,一般 是 在 左边 框架 的 网 页 中 包含 超 链接 的 
导航 信息 ,而 在 右边 的 框架 中 显示 超 链 接 的 目标 网 页 文件 。 操 作 步 又 如 下 。 
(1) 每 个 框架 要 有 框架 名 称 , 如 果 还 没有 框架 名 称 ,打开 * 框 架 ” 面 板 , 选 中 该 框架 ,在 
“属性 ”面板 中 设置 框架 名 称 。 
(2) 选择 要 定义 超 链接 的 对 象 , 例 如 文字 、 图 像 按钮 等 ,在 “属性 ”面板 的 “链接 ”文本 
框 中 输入 链接 文件 名 ,或 者 单 击 该 文本 框 右 侧 的 “浏览 文件 ”按钮 ,在 “选择 文件 ”对 话 框 中 
选择 要 链接 的 文件 。 
(3) 在 “目标 ”下 拉 列 表 中 ,选择 目标 框架 名 ,如 图 5. 47 所 示 。 
链接 目标 的 含义 如 下 。 
。 _blank: 在 一 个 新 窗口 显示 超 链接 的 目标 文件 ,同时 保 9 i 
持 当 前 窗口 不 变 。 本 
。 _parent: 在 上 一 级 框架 中 打开 链接 文件 。 
。 _self: 在 当前 框架 中 打开 链接 ,同时 蔡 换 该 框架 中 的 
内 容 。 为 网 页 超 链 接 的 默认 目标 窗口 。 
。 _top: 删除 所 有 框架 ,在 当前 浏览 器 窗口 中 打开 链接 的 
文档 。 如 果 想 跳出 框架 结构 ,应 选用 此 项 。 
。 具体 的 框架 名 称 : 在 指定 的 框架 位 置 显示 链接 文件 。 


7. 保存 框架 和 框架 集 


6. 设置 超 链接 目标 框架 


图 5.47 选择 链接 目标 


创建 好 框架 结构 ,设置 好 框架 的 属性 后 ,就 要 保存 框架 。 此 时 用 户 可 以 单独 保存 一 个 
框架 集 文件 ,或 一 个 框架 文件 ,或 保存 所 有 打开 的 框架 文件 和 框架 集 文件 。 

(1) 保存 某 个 框架 页 : 将 光标 置 于 需要 保存 的 框架 中 ,选择 “文件 "菜单 “保存 框架 
页 "命令, 如果 该 框架 文档 是 新 建 的 ,这 时 将 打开 “另存 为 ”对话 框 ,在 该 对 话 框 中 选择 存储 
路 径 并 输入 文件 名 ,然后 保存 该 框架 文档 ,否则 覆盖 保存 。 

(2) 保存 框架 集 : 选中 整个 框架 集 , 选 择 “ 文 件 "菜单 一“ 保存 框架 页 ”或 “框架 集 另 存 
为 ”命令 ,保存 框架 集 。 如 果 该 框架 集 是 新 建 的 ,这 时 将 打开 “另存 为 "对话 框 ,在 该 对 话 框 
中 选择 存储 路 径 并 输入 文件 名 ,然后 保存 该 框架 集 。 

(3) 保存 所 有 框架 (包括 框架 集 及 框架 页 ): 可 选择 “文件 ”菜单 一“ 保存 全 部 ”命令 ， 
这 时 Dreamweaver 将 逐个 保存 页 面 中 的 所 有 框架 。 


8. 编辑 无 框架 内 容 


如 果 浏 览 器 不 支持 框架 , 则 无 法 显示 框架 集 和 框架 文档 内 容 ,这 时 必须 生成 一 个 无 框 
架 文档 , 当 不 支持 框架 的 浏览 器 载 人 框架 文件 时 ,浏览 器 只 会 显示 无 框架 内 容 。 编 辑 无 杠 
架 内 容 的 操作 步骤 如 下 。 

(1) 选择 “修改 ”菜单 “框架 集 ”一 “编辑 无 框架 内 容 " 命 令 , 这 时 ,当前 文档 的 内 容 就 
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会 被 清除 ,正文 区 域 的 上 方 出 现 一 个 无 框架 内 容 的 标志 ,可 以 在 该 窗口 中 执行 输入 文本 、 
插 人 图 像 .编辑 表格 ,制作 表单 等 操作 。 

(2) 再 次 选择 “修改 "菜单 “框架 集 ” 一 “编辑 无 框架 内 容 ” 命 令 , 即 取消 编辑 无 框架 
内 容 状态 ,返回 文档 窗口 。 


5.5.3 框架 排版 网 页 的 制作 过 程 


本 小 节 讲 解 例 5. 3 所 举 利 用 框架 技术 进行 排版 网 页 的 制作 过 程 。 本 网 站 是 一 个 销售 
电子 类 产品 的 企业 ,网 站 建设 的 目的 是 让 企业 新 老 客 户 了 解 产品 的 详情 ,并 能 在 网 上 及 时 
下 载 最 新 的 支持 资料 。 由 于 产品 种 类 非常 多 ,因此 将 展示 产品 的 这 部 分 网 页 用 框架 结构 
排版 ,主要 的 作用 是 增强 产品 的 导航 功能 。 制 作 过 程 如 下 。 

(1) 创建 一 个 本 地 站 点 WWW. 创 建 子 文件 
夹 images, 将 网 页 图 片 素材 存储 在 此 文件 夹 中 。 | topfrane 
再 创建 两 个 子 文件 夹 sj 和 mw 作为 产品 两 大 类 | (top.htm) 
别 , 将 相关 产品 信息 的 素材 存储 在 此 文件 夹 中 ， 
随后 建立 的 有 关 产 品 信 息 的 网 页 也 存储 在 这 两 | 全 "eerane 
个 文件 夹 中 。 《left.html) (main.html) 

(2) 规划 框架 结构 如 图 5. 48 所 示 。 其 中 包 
含 了 4 个 网 页 ,分 别 是 top. html、left html、 周生生 柜 加 结构 图 
main. html 及 框架 集 页 面 cp. html。 

(3) 分 别 编辑 三 个 网 页 : top. htm ,left. htm 和 main. htm。 

OO 编辑 top. htm: 新 建 一 个 文档 ,插入 一 个 表格 ,表格 宽度 为 750 ,高 度 为 99 ,单位 为 
像素 ,在 单元 格 中 插 和 人 图 像 和 Flash 动画 ,保存 网 页 ,如 图 5. 49 所 示 。 


tt x 
NSD «ess 
| 人 8 友 | 拆 分 [设计 | 实时 代码 | 记 交 。_ 究 时 视图 | 检查 | 包 ) 已 。 人 局 。。 标题 ， 西 支 九星 电子 有 限 囊 任 公司 
| GO © Di TT ME] 
西安 九星 电子 有 限 丙 任 公司 

Wwwninestar-xa.com 
/A 主页 公司 简介 产品 中 心 选 型 介绍 资料 下 载 在 贱 订 购 请 疙 留言 村 


图 5.49 top. html 网 页 


@ 编辑 left. html: 新 建 一 个 文档 ,插入 一 个 表格 ,表格 宽度 为 150, 插 入 多 个 “鼠标 经 
过 图 像 "图 像 对 象 , 构 成 一 个 纵向 导航 条 ,保存 网 页 ,如 图 5. 50 所 示 。 

@ 编辑 main. html: 新 建 一 个 文档 ,插入 一 个 表格 ,表格 宽度 为 90%% ,输入 文本 和 图 
像 ,选中 文本 和 图 像 , 单 击 “ 属 性 ”面板 中 “内 缩 区 块 ” 按 钮 ,结果 如 图 5. 51 所 示 。 

最 后 编辑 产品 的 其 他 页 面 ,例如 mw/mw. htm、sj/sj. htm 等 。 

(4) 创建 框架 集 。 选 择 “ 文 件 " 菜 单一 “新 建 "命令 ,弹出 “新 建文 档 ” 对 话 框 , 单 击 “ 示 
例 中 的 页 ”选项 卡 , 在 “示例 文件 夹 " 列 表 中 选择 “框架 页 ”文件 夹 ,然后 选择 出 现在 右 侧 列 
表 框 中 的 框架 样式 ,如 图 5. 41 所 示 。 


5.50 left. html 网 页 


9 a 入 项 载 老化 戎 直人 和 小 、 重 重 短工 作 直 度 性， 效 这 高 ， 估 起 撤 ，105 案 负电 下 路 ， 寿 闪 卡 ， [ 


江 、 上 海 大 (SAma ) 码 2 昌 源 


代理 既 销 部 种 品牌 84 闪 品 午 示 回 : 香 老 特 电 、 香 老 信 利 、 日 本 DFTEEK , 日志 SHA 天 罗 直 品 守 未 强 等 。 


逃 、 单片机 仿真 机 
1 人 弛 种 吕 提 片 机 、 读 站 机 ;信和 列 、 履 京 st、 名 Er Pa 等 


图 5.51 main. html 网 页 
(5) 选择 “窗口 "菜单 一 “框架 "命令, 打开“ 框架” 面板。 单 击 项 部 框架 (topFrame) 区 
域内 ,在 “属性 ”面板 中 设置 顶部 框架 的 属性 ,在 源 文件 文本 框 处 输入 top. htm, 设 置 为 无 
边框 滚动 ?为 否 ,选中 “不 能 调整 大 小 ” 复 选 框 等 ,如 图 5. 52 所 示 。 


要 名称 源 文件 @J) stm  ，  g 日 央 四 区 
fm hw 于 可 扩 直 隔 大 NE 过 ECOrlf | 


边界 宽度 如 局 。”。 
边界 高 度 虽 


图 5.52 设置 框架 属性 
(6) 同 理 , 选 中 左 框架 (leftFrame) ,在 “属性 ”面板 中 设置 左 框 架 的 属性 ,在 “ 源 文件 ” 


闻 
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文本 框 处 输入 left. htm; 选 中 主 框架 (mainFrame) ,在 “属性 ?面板 中 设置 主 框架 的 属性 ， 
在 “ 源 文 件 ” 文 本 框 处 输入 main. htm。 
此 时 框架 结构 的 尺寸 还 不 够 合理 ,各 个 网 页 的 内 容 不 能 很 好 地 显示 ,如 图 5.53 所 示 。 


治 、 汉 局 中 
人 人 日 、 日 sr 系列 下 避 不 和 于 


图 5.53 未 调整 的 框架 集 


(7) 调整 框架 结构 。 令 光标 指向 框架 边框 处 ,光标 指针 变 为 双向 箭头 ,移动 框架 的 边 
框 , 调 整 框架 显示 的 范围 。 此 时 框架 行 高 和 列 宽 不 是 一 个 精确 值 。 

要 精确 地 设置 框架 显示 的 范围 , 则 打开 * 框 架 ? 面 板 , 单 击 框架 外 框 , 在 “属性 ”面板 中 
输入 行 高 为 99, 如 图 5. 54 所 示 。 为 什么 设置 行 高 为 99 呢 ? 这 是 因为 top. html 中 表格 的 
高 度 为 99。 单 击 “ 框 架 " 面 板 中 骨 套 框架 集 的 外 框 (上 、 下 拆 分 处 的 边框 ) ,在 “属性 ”面板 
中 设置 列 宽 为 150, 为 什么 设置 列 宽 为 150? 因为 left. html 中 表格 的 宽度 为 150。 


BO 


于 | 框 某 集 这 性 @) | 否 | 连环 色 Cc) 三 :| 
DP [一 


值 单位 
站 = x la | 


图 5.54 ”精确 设置 框架 显示 范围 


注意 : 框架 的 行 高 和 列 宽 的 设置 与 网 页 内 容 相关 联 , 这 样 页 面 的 内 容 才 能 合理 显示 
在 框架 中 。 

(8) 添加 超 链 接 。left. html 中 包含 了 一 个 导航 条 ,添加 超 链接 ,比如 选中 第 一 个 导航 
条 按钮 ,在 “属性 ?面板 中 的 “链接 "文本 框 中 输入 链接 地 址 mw/mw. htm,“ 目 标 ” 下 拉 列 表 
中 选择 框架 名 称 为 mainFrame, 其 他 导航 按钮 的 链接 目标 均 为 mainFrame。 再 添加 
top. html 中 的 超 链接 ,选中 “公司 简介 ”图 像 按 钮 ,在 “链接 "文本 框 中 输入 链接 地 址 
intro. html, “目标” 下 拉 列 表 中 选择 为 _top, 公 司 简介 网 页 将 在 无 框架 状态 显示 。 

(9) 选中 整个 框架 集 , 选 择 “ 文 件 " 菜 单一 “保存 框架 页 ”或 “框架 集 另存 ”命令 ,保存 框 
架 集 ,最 后 在 浏览 器 中 浏览 网 页 效果 。 
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注意 : 可 先 创 建 框架 集 , 然 后 在 框架 中 进行 各 个 网 页 的 编辑 ,编辑 完成 后 保存 各 个 杠 
架 及 框架 集 。 但 是 这 样 做 有 一 些 缺点 ,就 是 框架 中 的 网 页 编辑 始终 在 一 个 小 区 域 , 不 太 方 
便 , 因 此 本 实例 中 单独 创建 页 面 ,然后 通过 框架 的 属性 设置 将 页 面 链接 到 框架 集中 的 。 


本 章 小 结 


本 章 通 过 几 个 网 页 实例 的 导入 ,介绍 了 在 Dreamweaver 中 网 页 排版 的 方法 ,对 表格 、 
层 以 及 框架 技术 的 使 用 进行 了 详细 说 明 ,并 对 行为 的 概念 及 Dreamweaver CS5 中 常用 的 
内 部 行为 进行 了 介绍 。 


(1) 简 述 表格 在 网 页 中 的 作用 。 

(2) 什么 是 层 ? 层 有 什么 特点 ? 

(3) 什么 是 框架 ? 框架 和 框架 集 关系 是 什么 ? 它们 的 功能 是 什么 ? 
上 机 实验 


1. 实验 要 求 
(1) 根据 网 页 草图 1, 如 图 5. 55 所 示 , 利 用 表格 设计 网 页 布局 ,在 单元 格 中 添加 网 页 元 素 。 
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图 5.55 实验 : 网 页 草图 1 
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(2) 在 第 (1) 步 的 基础 上 ,利用 Dreamweaver 内 部 行为 添加 网 页 交互 效果 : 弹出 信息 
和 打开 浏览 器 窗口 。 

(3) 根据 网 页 草图 2, 如 图 5. 56 所 示 , 利 用 框架 设计 网 页 布局 , 左 框架 中 是 导航 条 ,在 
上 框架 中 插入 图 片 和 Flash 动画 ,在 主 框架 中 插入 图 片 和 文本 。 


cardshow 


祝 天 下 广大 母亲 幸福 安康 ! 


图 5.56 实验 : 网 页 草图 2 


2. 背景 知识 


根据 本 章 所 学 的 网 页 布局 行为 的 知识 ,综合 前 面 所 学 的 创建 站 点 及 编辑 网 页 的 知 
识 , 进 行 网 页 不 同 排版 方式 的 练习 。 


3. 实验 准备 工作 
实验 素材 和 网 页 草图 发 送 到 学 生 的 主机 中 ,以 供 学 生 参 考 使 用 。 


4. 课时 安排 

上 机 实验 课时 安排 为 4 课时 。 实 验 要求 (1) 和 (2) 项 共 为 2 课时 ,实验 要 求 (3 ) 为 
2 课时 。 

5. 实验 指导 


1) 表格 设计 网 页 布局 

(1) 首先 创建 一 个 本 地 站 点 ,新建 一 个 文档 (其 余 几 个 实验 是 一 样 的 ,这 是 必需 的 第 
一 个 步骤 ) ,然后 单 击 “ 属 性 ”面板 中 的 “页 面 属性 "按钮, 弹出“ 页面 属性 ”对 话 框 , 单 击 “ 跟 
踪 图 像 ” 选 项 卡 , 将 草图 导入 到 跟踪 图 像 中 .改变 透明 度 为 50%。 

(2) 选择 “插入 ” 栏 一 “常用 ”按钮 组 一 “表格 ”按钮 .分别 持 入 3 个 表格 (上 、 中 、 下 ), 表 
格 的 宽度 与 草图 总 的 宽度 相同 , 均 为 853 像素 ,每 一 个 表格 为 两 列 , 左 侧 单 元 格 的 宽度 为 
161 像素 ,如 图 5. 57 所 示 。 

(3) 插入 网 页 元 素 。 打 开 “ 页 面 属性 ”对 话 框 ,删除 跟踪 图 像 , 保 存 网 页 。 


绿色 色 块 公司 标志 | 表格 I 
导航 栏 广告 横幅 一 一 一 | 一 表格 2 
弓 二 公司 简 

绿色 色 块 公司 简介 [有 


图 5.57 实例 : 利用 表格 布局 网 页 结构 图 


2) 利用 行为 添加 网 页 交互 效果 

特效 1: 弹出 信息 。 

(1) 单 击 网 页 中 间 的 logo 标志 ,选择 “窗口 ”菜单 一 “行为 "命令 , 打 
面板 , 单 击 “ 行 为 ”选项 卡 中 的 “添加 行为 ”按钮 ,选中 “弹出 信息 ”命令 ,在 
框 中 输入 “欢迎 光临 xX xX x x 太阳 能 公司 ”, 单 击 “确定 ”按钮 。 

(2) 在 “行为 ”选项 卡 中 ,选中 事件 为 onClick。 

特效 2: 打开 浏览 窗口 。 

(1) 新 建 一 个 网 页 ,在 网 页 中 输入 文本 ,插入 图 像 , 保 存 为 guanggao. htm。 

(2) 打开 用 表格 布局 的 网 页 , 单 击 文档 窗口 左下 角 的 二 body 二 标签 , 单 击 “ 行 为 ?选项 
卡 中 * 添 加 行为 ”按钮 ,选择 * 打 开 浏览 器 窗口 ”命令 ,在 “打开 浏览 器 窗口 ?对 话 框 中 ,输入 
网 页 地 址 guanggao. htm, 定 义 窗口 大 小 及 其 他 属性 , 单 击 “ 确 定 ” 按 钮 。 

(3) 在 “行为 ”选项 卡 中 ,选择 事件 为 onLoad。 

3) 框架 设计 网 页 布局 

网 页 的 框架 布局 图 如 图 5. 58 所 示 。 


开 “ 标 签 检 查 器 ” 
“弹出 信息 ”对 话 


topFrame( 包 含 的 是 top.htm) 


leftFrame 


(包含 的 是 
left.htm) mainFrame( 包 含 的 是 main.htm) 


图 5.58 框架 布局 图 


(1) 制作 三 个 网 页 ,分 别 为 top. htm \left. htm 和 main. htm, 注 意 这 三 个 网 页 中 所 包 
含 的 网 页 内 容 : top. htm 包括 的 是 标志 ,如 图 5. 59 所 示 ;left. htm 包括 的 是 导航 条 ,如 
图 5. 60 所 示 ;main. htm 包括 的 是 文本 和 图 像 内 容 , 如 图 5. 61 所 示 。 
(2) 选择 “文件 ”菜单 一 “新 建 "命令 ,在 “新 建文 档 ” 对 话 框 中 , 单 击 “ 示 例 中 的 项 ”选项 
卡 , 在 “示例 文件 夹 ”列表 中 选择 “框架 页 ”及 右 侧 列表 框 中 的 框架 样式 ,选择 * 上 方 固定 , 左 


侧 嵌 套 ” 样 式 。 


cardsnow 


祝 天 下 广大 和 母亲 幸福 ”安康 1! 


图 5.59 top. htm 


大 扎根 溯源 人 


ee a (高 尔 基 ) 


母 要 是 一 种 巨大 的 火焰 。 (罗曼 罗兰 
机 感恩 献礼 世界 上 有 一 种 最 美丽 的 声音 ， 那 便 是 母亲 的 呼唤 ( 


但 丁 ) 
人 生 最 美的 东西 之 一 就 是 母爱 ， 这 是 无 私 的 爱 ， 道 德 与 之 相形 见 她 ，《〈 日 本 ) 
妈妈 你 在 哪儿 ， 哪 儿 就 是 最 快乐 的 地 方 。( 英 国 ) 
瑞 慈母 歌颂 花 母 的 脂 科 是 慈爱 构成 的 ， 孩 子 盯 在 里 面 怎 能 不 甜 ?3 ( 雨 果 ) 
人 的 嘴唇 所 能 发 出 的 最 射 美的 字眼 ， 就 是 母亲 ， 最 美好 的 呼唤 ， 就 是 “妈妈 ”〈 纪 伯 伦 ) 
母爱 是 世间 最 伟大 的 力量 (米尔 ) 


成 功 的 时 候 ， 谁 都 是 朋友 。 但 只 有 和 母亲 一 一 她 是 失败 时 的 伴侣 。 (郑振铎 ) 
瑞 卡 秀 亲 情 世界 上 一 切 其 他 者 是 假 的 ， 空 的 ， 唯 有 母亲 才 是 真 的 ， 永 恒 的 ， 不 灭 的 。 (印度 ) 


图 5.60 left. htm 图 5.61 main.htm 


(3) 打开 “框架 "面板 ,然后 选中 topFrame 框架 ,在 “属性 ”面板 中 设置 框架 属性 ,在 
“ 源 文件 ”文本 框 中 输入 top. htm。 同 理 选 中 leftFrame 框架 、mainFrame 框架 分 别 设置 框 
架 属性 ,网 页 路 径 分 别 为 left. htm 和 main. htm, 将 各 个 框架 页 面 链 接 到 框架 集中 。 制 作 
“追根 溯源 ”的 网 页 为 main0. htm, 并 制作 导航 条 所 要 链接 的 其 他 网 页 。 

(4) 单 击 左 框架 内 ,选中 导航 条 按钮 ,在 “属性 ”面板 中 添加 超 链 接地 址 main0. htm， 
第 2 个 导航 栏 按钮 的 链接 地 址 为 main0. htm, 这 两 个 超 链接 的 链接 目标 均 为 mainFrame。 

(5) 光标 指针 放 在 框架 边框 处 ,调整 各 框架 的 显示 范围 ,或 选中 框架 集 ,在 “属性 ” 面 
板 中 ,设置 框架 的 行 高 或 列 宽 。 

(6) 打开 * 框 架 ? 面 板 , 选 中 框架 集 ,选择 “文件 ?菜单 一 保存 框架 页 ”或 “框架 集 另 存 
为 ”命令 ,保存 框架 集 。 


CSS(cascading style sheets) 中文 译 为 层 登 样式 表 , 用 于 定义 HTML 元 素 的 显示 形 
式 , 是 W3C 推出 的 格式 化 网 页 内 容 的 标准 技术 ,是 用 于 控制 网 页 样式 并 允许 样式 信息 与 
网 页 内 容 分 离 的 一 种 标记 性 语言 。 

本 章 主要 介绍 了 CSS 的 功能 与 应 用 ,重点 讲解 利用 CSS 十 Div 技术 进行 网 页 布局 。 


【本 章 学 习 目 标 】 


。 了 解 CSS 的 功能 与 用 途 ; 

。 掌握 定义 CSS 规则 的 方法 ; 

。 掌握 利用 CSS 进行 网 页 美化 的 技巧 ; 

。 重点 掌握 利用 CSS 十 Div 技术 进行 网 页 布局 。 


6.1 实例 导入 : 应 用 CSS 样式 的 网 页 


CSS 是 由 一 系列 样式 选择 器 和 CSS 属性 组 成 的 , 它 支 持 文本 属性 .颜色 和 背景 属性 、 
边框 属性 、 列 表 属 性 以 及 精确 定位 网 页 元 素 属性 等 ,增强 了 网 页 的 格式 化 功能 。 

使 用 CSS 的 另 一 个 优点 是 可 以 利用 同一 个 样式 表 对 整个 站 点 的 具有 相同 性 质 的 网 
页 元 素 进行 格式 修饰 , 当 需 要 更 改 样式 设置 时 ,只 要 在 这 个 样式 表 中 修改 ,而 不 用 对 每 个 
页 面 逐 个 进行 修改 ,简化 了 格式 化 网 页 的 工作 。 

【 例 6.1】 HTML 标签 的 简单 应 用 示例 ,在 网 页 中 若 使 每 个 段落 的 文字 用 深 灰 色 显 
示 , 那 么 HTML 源 代码 就 要 写成 : 


<p><font color= "# 999999"> 段 落 1< /font></P> 
<p><font color= "# 999999"> 段 落 2< /font></p> 


若 要 把 段落 字体 改 为 红色 ,一般 地 必须 对 每 段 文字 颜色 的 代码 进行 修改 ,这 将 非常 麻 
烦 。 而 CSS 样式 表 又 是 怎么 解决 这 个 问题 的 呢 ? 


【 例 6.2】 CSS 颜色 设置 的 简单 应 用 ,只 需 在 过 head 二 和 去 /head> 之 间 添 加 如 下 
CSS 代码 : 


<style type=text/css> 
<!—— 
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pt{ 
color:#999999; 

} 

一 -> 

</style> 

所 有 段落 文字 处 不 用 设置 任何 字体 颜色 即 呈 现 为 深 灰 色 ,如 果 要 将 文字 改 成 红色 ,只 
需 将 上 述 代码 中 颜色 修改 为 color: 并 FF0000 即 可 。 

在 Dreamweaver CS5 中 网 页 是 基于 CSS 进行 构造 的 。 从 下 面 的 页 面 属性 和 文本 样 
式 的 设置 可 以 说 明 这 一 点 。 

【 例 6.3】 页 面 属性 的 设置 。 

新 建 一 个 页 面 ,然后 单 击 “ 属 性 ”面板 中 的 “页 面 属性 ”按钮 ,弹出 “页 面 属性 ”对 话 框 ， 
如 图 6. 1 所 示 , 在 此 进行 如 下 设置 。 


分 类 
ss) 
SS 
Ey 
CE 本 EY 
页 面 属性 
es 0 Css) 
ED 馆 失 字体 CD): [CREF#7  B 7 
a (Ess) 大 小 5): | 到 ~ 
| 链接 大 色 0); 天 | [2% 支 的 图 者 梳 接 (8): 大 | [ 宁 00 
已 访问 链接 0): 可 | 活动 镜 接 愉 ): 国 | 
再 式 0 区 本 本 和 
[和 确证] [取消 应 用 


图 6.1 在 “页 面 属性 ”对话 框 中 设置 CSS 样式 


(1)“ 外 观 (CSS)” 选 项 卡 : 设置 字体 “大 小 ”为 12 像素 ,“ 背 景 图 像 ” 选 择 images/bg. 
gif, “重复 ”属性 选择 “no-repeat”, 页 边 距 均 为 0。 

(2)“ 链 接 (CSS)” 选 项 卡 : 设置 文本 链接 特效 “链接 颜色 ?为 深 灰 色 (#999)，“ 变 换 
图 像 链 接 ”( 即 鼠标 经 过 时 的 颜色 ) 为 红色 (并 F00),* 已 访问 链接 ?为 深 灰 色 ( 井 999) “下 
划 线 样式 ”选择 “ 仅 在 变换 图 像 时 显示 下 划 线 ”。 

这 些 设置 会 自动 生成 CSS 代码 ,在 二 head 二 和 二 /head 之 中 出 现 ,CSS 样式 会 自动 应 
用 于 网 页 。 
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【 例 6.4】 文本 样式 的 设置 。 

选中 文本 时 ,在 “属性 ”面板 CSS 选项 卡 中 进行 文本 属性 设置 ,如 字体 “大 小 ?为 18 像 
素 ,颜色 为 #FC0, 当 设置 字体 大 小 时 ,会 弹出 一 个 “新 建 CSS 规则 ”对 话 框 ,如 图 6. 2 所 
示 。 在 “选择 器 类 型 "下 拉 列 表 中 选择 “类 (可 应 用 于 任何 HTML 元 素 )”, 在 “选择 器 名 
称 ” 中 输入 样式 名 myfont, 在 “规则 定义 ”中 选择 “( 仅 限 该 文档 )” 属 性 。 


新 建 C55 规则 


连 择 器 关 型 - 
为 Css 规则 选择 上 下 文选 择 器 基 型 
美 ( 可 应 用 于 任何 ITWL 元 素 ) 


和 名 名 称 桂 规则 应 用 于 


具有 关 "myfent 的 打上 元 素 。 


规则 定义 - 
选择 定义 规则 的 位 置 。 
《 仅 限 该 文档 ) 


6.2 “新 建 CSS 规则 ”对 话 框 


【 例 6.5】 利用 CSS 样式 还 可 以 代替 表格 进行 网 页 布局 ,这 是 目前 较为 流行 的 页 面 
排版 方式 ,示例 如 图 6. 3 所 示 。 


图 6.3 利用 CSS 十 Div 进行 网 页 布局 


ee) 网 站 规划 与 网 页 设计 【各 和 


该 实例 主要 采用 了 CSS 样式 十 Div 标签 ,主要 涉及 以 下 几 个 知识 点 。 
(1) 分 析 构 架 : 画 出 构架 图 。 

(2) 模块 拆 分 : 分 别 定义 特定 ID 的 Div 标签 的 CSS 样式 。 

(3) 在 网 页 中 插入 Div 标签 ,在 Div 中 插入 网 页 元 素 。 

(4) 搬入 spry 选项 卡 式 面板 。 

(5) 总 体 调整 : 色彩 及 内 容 的 调整 ,适当 修改 CSS 样式 。 


6.2 了 解 CSS 


6.2.1 CSS 概述 
1. 样式 表 的 使 用 


使 用 CSS 的 方法 通常 有 以 下 两 种 。 

方法 一 ”页 面 内 骨 法 。 将 样式 表 代 码 直 接 写 在 HTML 标签 的 和 head 之 和 去 /head> 之 
间 , 如 例 6. 2。 

方法 二 ”外 部 链接 法 。 将 样式 表 写 在 一 个 独立 的 后 级 名 为 css 文件 中 ,如 文件 名 为 
master. css, 在 需要 应 用 CSS 样式 的 网 页 中 链接 该 文件 ,在 页 面 二 head 之 和 二/head> 之 
间 用 以 下 代码 调用 。 


<link href="css/master.css" rel="stylesheet" type= "text/css" /> 


在 符合 Web 标准 的 设计 中 ,使 用 外 部 链接 法 的 好 处 不 言 而 喻 ,用 户 无 须 修改 页 面 ,只 
修改 CSS 文 件 就 可 改变 页 面 的 样式 。 如 果 所 有 页 面 都 调用 同一 个 样式 表 文件 ,那么 修改 
一 个 样式 表 文 件 ,就 可 改变 所 有 文件 的 样式 。 


2. CSS 样式 表 语 法 


选择 符 { 属性 1: 值 1; 属 性 2: 值 2;… } 
参数 说 明 : 属性 和 属性 值 之 间 用 冒号 (: ) 隔 开 , 定 义 多 个 属性 时 ,属性 之 间 用 分 号 
(3;) 隔 开 。 


6.2.2 在 Dreamweaver 中 定义 CSS 

1. 创建 CSS 样式 

选择 “窗口 ”菜单 “CSS 样式 ”命令 ,打开 “CSS 样式 ”面板 , 单 击 右 下 角 的 “新 建 CSS 
规则 ”按钮 姑 , 或 选择 “格式 "菜单 “CSS 样式 >“ 新建" 命令 ,弹出 “新 建 CSS 规则 ”对 话 


框 ,如 图 6.4 所 示 。 
该 对 话 框 中 各 属性 的 功能 如 下 。 
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选择 器 类 型 - 
为 CSS 规则 选择 上 下 文选 择 器 类 型 。 
标签 ( 重新 定义 HTWL 元 素 ) 


思 择 器 名 称 - 
选择 或 输入 选择 器 名 称 。 
加 


Ea 


《 羽 限 该 文档 》 [| 


图 6.4 “新 建 CSS 规则 ”对话 框 


1) 选择 器 类 型 

(1) 类 (可 应 用 于 任何 HTML 元 素 ): 自 定 义 CSS 规则 , 它 的 特点 是 灵活 多 变 , 可 以 
重复 将 样式 应 用 于 网 页 元 素 。 在 应 用 时 , 它 会 在 HTML 标签 内 加 入 一 个 类 (class) 的 定 
义 来 规定 标签 中 的 格式 。 比 如 将 类 的 样式 mystyle 定义 于 某 个 标题 ,那么 代码 如 下 : 

<hl class= "mystyle"> 标 题 1 应 用 自 定义 的 样式 < /hl> 

(2) 标签 (重新 定义 HTML 元 素 ): 重新 定义 指定 标签 的 外 观 , 例 如 : 创建 或 更 改 hl 
标签 的 CSS 样式 时 ,所 有 用 hl 标签 设置 了 格式 的 文本 都 会 立即 更 新 ,实现 了 批量 快速 更 
改 格式 的 特点 。 

(3) ID( 仅 应 用 于 一 个 HTML 元 素 ): 定义 ID 的 CSS 样式 , 即 针对 特定 网 页 元 素 的 
样式 设置 , 仅 用 于 命名 为 ID 的 网 络 元 素 。 

(4) 复合 内 容 ( 基 于 选择 的 内 容 ) : 在 CSS 选择 器 中 , 它 的 功能 最 为 强大 ,可 以 定义 超 
链接 的 特效 ,定义 特定 元 素 组 合 的 样式 设置 (例如 body,table,td, 用 逗号 隔 开 ) ,还 可 定义 
在 套 的 样式 (如 “td img” 用 空格 隔 开 ) 。 

2) 定义 CSS 规则 的 位 置 

定义 的 位 置 有 以 下 三 种 情况 。 

(1) 选择 “( 仅 限 该 文档 )”, 此 时 CSS 样式 的 代码 会 嵌 套 在 网 页 壹 head 和 志 /head> 
标签 中 。 

例如 ,选择 “规则 定义 ”为 “( 仅 限 该 文档 )”, 单 击 “ 确 定 ” 按 钮 后 ,将 弹出 “XX 的 CSS 
规则 定义 ”对 话 框 ,如 图 6. 5 所 示 ,为 “hl 的 CSS 规则 定义 ”对 话 框 。 在 该 对 话 框 中 对 hl 
标签 进行 CSS 样式 的 各 项 设置 .然后 单 击 “ 确 定 ” 按 钮 。 

(2) 选择 “(新 建 样式 表 文件 )”, 则 弹出 “保存 样式 表 文 件 为 "对话 框 ,如 图 6.6 所 示 。 
在 此 选择 样式 文件 的 存储 路 径 和 文件 名 , 单 击 “ 保 存 ” 按 钮 ,将 CSS 样式 代码 单独 存放 在 
一 个 CSS 文 件 中 。 
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图 6.5 “hl 的 CSS 规则 定义 "对话 框 
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图 6.6 “保存 样式 表 文 件 为 ”对话 框 


(3) 选择 “已 有 的 某 CSS 文 件 ”, 将 新 建 的 CSS 规则 写 入 已 有 的 CSS 文件 中 。 
2. 编辑 和 删除 CSS 样式 


创建 CSS 样式 后 ,如 果 要 修改 CSS 样式 ,在 “CSS 样式 ”面板 中 , 单 击 “CSS 样式 ”面板 
右 下 角 的 “编辑 样式 ”按钮 库 , 进 入 “CSS 规则 定义 ”对 话 框 ,在 此 进行 修改 。 


当 不 再 需要 某 个 CSS 样式 时 ,在 “CSS 样式 ”面板 中 ,首先 选中 某 个 样式 , 单 击 CSS 样 
式 面板 右 下 角 的 “删除 CSS 规则 ”按钮 副 即 可 。 


6.3 应 用 CSS 美化 网 页 


【 例 6.6】 应 用 CSS 样式 设计 出 图 文 混 排 效果 .如 图 6.7 所 示 


本 实例 所 涉及 的 知识 点 是 CSS 样式 的 创建 和 应 用 ,有 以 下 两 点 。 
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CSS 和 样式 的 应 用 


返 辐 首 页 。 CSs 衬 式 简介 ”EECTTE 了 Css 样式 进 阶 教程 。 与 我 联系 
使用 CS5 梯 式 十 大 理由 Christopher Schmitt， 他 是 C355 的 倡导 者 之 一 
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图 6.7 应 用 CSS 样式 设计 图 文 混 排 效果 


(1) 背景 样式 ,文本 及 列表 样式 方 框 与 边框 样式 .动态 链接 样式 。 
(2) 建立 单独 的 CSS 文件 ,将 其 应 用 于 多 个 网 页 。 


6.3.1 背景 样式 的 应 用 


在 图 6.7 中 ,上 方 橘 黄色 的 横 条 其 实 是 重 定 义 了 二 body 之 标签 的 网 页 背景 图 像 , 背 
景 图 像 横向 重复 ,对 网 页 元 素 与 页 边 距 也 进行 了 设置 ,其 操作 步骤 如 下 。 

(1) 单 击 “ 窗 口 " 菜 单一 “CSS 样式 ”命令 ,打开 “CSS 样式 ”面板 , 单 击 面板 右 下 角 的 
“新 建 CSS 规则 ”按钮 馈 , 弹 出 “新 建 CSS 规则 ”对 话 框 ,选择 “选择 器 类 型 "为 “标签 ( 重 
新 定义 HTML 元 素 )”, 在 “选择 嚣 名称” 下拉 列 表 中 选择 body, 选 择 “ 规 则 定义 ”为 “( 仅 
限 该 文档 )”, 单 击 “ 确 定 ” 按 钮 ,弹出 “body 的 CSS 规则 定义 对话 框 , 单 击 “背景 选项 
卡 ,设置 背景 图 像 为 images/bg. gif, 打 开 “ 重 复 ” 下 拉 列 表 , 选 择 “ 横 向 重复 ”命令 ,如 图 6. 8 
所 示 。 

(2) 设置 页 边 距 。 打 开 “body 的 CSS 规则 定义 ”对 话 框 的 “ 方 框 ”选项 卡 , 选 中 “填充 ” 
选项 组 中 的 “全 部 相同 ” 复 选 框 ,上 、 下 、 左 、 右 边 距 值 均 为 0,“ 边 界 ” 选 项 组 中 分 别 设置 
“上 ”“ 下 ” 均 为 50 像素 ,“ 左 ”“ 右 ” 均 为 100 像素 ,如 图 6.9 所 示 。 


6.3.2 文本 及 列表 的 应 用 


在 例 6.6 中 ,文本 和 列表 都 应 用 了 CSS 样式 ,分 别 设置 了 字体 、 段 落 、 列 表 的 相关 属 
性 。 第 一 行文 本 是 标题 1( 标 签 为 h1) ,第 二 行文 本 是 标题 2( 标 签 为 h2) ,正文 部 分 应 用 了 
列表 (标签 为 ul)。 


图 6.8 “body 的 CSS 规则 定义 "对话 框 中 的 “背景 "选项 卡 
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图 6.9 “body 的 CSS 规则 定义 ”对 话 框 中 的 “ 方 框 ”选项 卡 


1. 字体 样式 的 设置 


在 “body 的 CSS 规则 定义 ”对 话 框 的 “类 型 "选项 卡 中 ,可 设置 文本 的 字体 、 字 体 大 
小 字体 颜色 ,字体 修饰 .字体 的 粗细 . 行 高 等 属性 。 


2. 文本 段落 样式 的 设置 


“hl 的 CSS 规则 定义 ?对 话 框 的 “区 块 ?选项 卡 如 图 6. 10 所 示 , 可 在 其 中 设置 以 下 参数 。 

单词 间距 : 用 于 设置 每 个 单词 之 间 的 距离 ,距离 的 单位 有 很 多 种 ,一 般 用 像素 来 
是 里: 

字母 间距 : 用 于 设置 字母 .字符 之 间 的 距离 。 

垂直 对 齐 : 指定 对 象 的 纵向 对 齐 方式 ,比如 可 以 设置 文本 的 上 标 和 下 标 等 ,如 果 输 入 
一 个 具体 的 数值 , 则 后 面 的 下 拉 菜 单 框 中 将 显示 为 百 分 号 ,表示 这 个 值 是 相对 值 。 

文本 对 齐 : 设置 文本 对 齐 方式 。 

文字 缩 进 : 指定 首 行 缩 进 的 数值 。 
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hl 的 CSS 规则 定义 


图 6. 10 “hl 的 CSS 规则 定义 "对话 框 中 的 “区 块 " 选 项 卡 


3. 标题 的 设置 


操作 步骤 如 下 。 

(1) 重 定义 标题 1。 在 “新 建 CSS 规则 ?对话 框 中 ,选择 “选择 器 类 型 为 “标签 (重新 
定义 HTML 元 素 )”, 在 “选择 器 名 称 ” 下 拉 列 表 中 选择 hl ,选择 “规则 定义 为"( 仅 限 该 文 
档 )”, 单 击 “ 确 定 ” 按 钮 ,弹出 “hl 的 CSS 规则 定义 ?对 话 框 。 在 “类 型 ”选项 卡 中 ,定义 字体 
大 小 为 24 像素 ,粗细 为 特 粗 , 行 高 为 30 像素 ,颜色 为 深 红色 (#900); 单 击 “ 区 块 ” 选 项 卡 ， 
选择 “文本 对 齐 ” 方 式 为 居中 ,“ 字 母 间 距 ” 为 10 像素 。 

(2) 重 定义 标题 2。 方 法 与 步 又 (1) 相 同 , 单 击 * 类 型 ”选项 卡 ,设置 字 体 大 小 为 18 像 
素 ,粗细 为 粗 体 , 行 高 为 25 像素 ,颜色 为 深蓝 色 ( 井 006) ; 单 击 *“ 区 块 ? 选 项 卡 ,设置 “文本 对 
齐 ” 方 式 为 居中 。 


4. 列表 样式 的 设置 
列表 样式 包括 类 型 和 项 目 符号 图 像 等 属性 。“ 列 表 ” 选 项 卡 如 图 6. 11 所 示 。 


al 的 CSS 规则 定义 


CC 本 | EW | TY] 上 


图 6.11 “ul 的 CSS 规则 定义 ?对 话 框 中 的 “列表 ”选项 卡 


网 站 规划 与 网 页 设计 


类 型 : 设置 项 目 符号 或 编号 的 外 观 。 

项 目 符号 图 像 : 指定 图 像 蔡 代 项 目 符号 的 样式 ,美化 项 目 符号 。 

这 里 重 定义 项 目 列表 (标签 为 ul) 。 方 法 与 标题 设置 时 的 步骤 (1) 相 同 , 在 弹出 的 “ul 
的 CSS 规则 定义 ”对 话 框 中 ,在 “类 型 "选项 卡 中 ,设置 字体 大 小 为 14 像素 ,字体 颜色 为 深 
灰色 (#666) , 行 高 为 20 像素 ; 单 击 “ 列 表 ” 选 项 卡 ,如 图 6. 11 所 示 , 在 “项 目 符号 图 像 ” 中 
输入 URL 地 址 images/li. gif,“ 位 置 " 下 拉 列 表 不 设置 , 即 为 默认 (位 置 有 两 种 , 即 “ 外 ”和 
“内 ”, 默 认为 “外 ”) , 单 击 “ 确 定 ” 按 钮 。 


6.3.3 ” 方 框 和 边框 样式 的 应 用 


在 例 6.6 中 ,在 正文 的 右 侧 插入 一 幅 图 像 , 通 过 CSS 样式 的 应 用 ,实现 图 文 混 排 的 效 
果 。 方 法 是 设置 方 框 的 浮动 和 边界 及 填充 的 距离 ,从 而 实现 图 像 与 文本 之 间 的 环绕 。 男 
外 ,还 添加 一 个 虚线 边框 样式 修饰 图 像 。 方 法 为 首先 定义 一 个 类 的 CSS 规则 ,然后 将 此 
类 应 用 于 某 个 图 像 上 。 


1. 图 像 方 框 的 设置 


以 如 图 6. 12 所 示 的 “myimages 的 CSS 规则 定义 ”对 话 框 为 例 ,打开 “ 方 框 ” 选 项 卡 ， 
主要 的 几 个 属性 的 功能 如 下 。 

。 高 度 和 宽度 : 方 框 的 尺寸 。 

。 浮动 : 设置 方 框 浮 于 页 面 的 位 置 为 : 左 对 齐 . 右 对 齐 .无 。 

。“ 填 充 ” 选 项 组 : 设置 位 于 方 框 中 的 网 页 元 素 到 边框 的 距离 。 

。“ 边 界 ” 选 项 组 : 设置 网 页 元 素 边 缘 与 周围 元 素 之 间 的 距离 。 


2. 图 像 边框 的 设置 


在 如 图 6. 13 所 示 的 “myimages 的 CSS 规则 定义 ”对 话 框 的 “边框 ”选项 卡 中 ,主要 包 
括 “ 样 式 ” 选 项 组 “宽度 ”选项 组 和 “颜色 ”选项 组 等 。 

对 于 例 6.6, 我 们 先 定义 一 个 类 的 CSS 规则 ,然后 将 此 类 应 用 于 指定 图 像 上 。 操 作 步 
又 如 下 。 

(1) 单 击 “新 建 CSS 规则 ”按钮 ,在 弹出 的 “新 建 CSS 规则 ?对 话 框 中 设置 “选择 器 类 
型 ”为 “类 (可 应 用 于 任何 HTML 元 素 )”, 在 “选择 器 名 称 ” 文 本 框 中 输入 myimages ,选择 
“规则 定义 ”为 *( 仅 限 该 文档 )”, 单 击 “ 确 定 ” 按 钮 。 

(2) 方 框 的 参数 设置 ,如 图 6. 12 所 示 。 

(3) 边框 的 参数 设置 ,如 图 6. 13 所 示 。 

(4) 类 的 应 用 。 将 自 定义 的 CSS 规则 应 用 于 网 页 元 素 , 常 用 的 方法 有 两 种 。 

方法 一 ”选中 网 页 元 素 , 在 “CSS 样式 ”面板 中 选中 准备 应 用 的 样式 , 右 击 ,在 弹出 的 
快捷 菜单 中 选择 “套用 ”命令 ,如 图 6. 14(a) 所 示 。 

方法 二 ”选中 网 页 元 素 , 在 “属性 ”面板 中 ,在 “类 "下拉 列表 中 选择 类 名 称 myimages， 
如 图 6. 14(b) 所 示 。 
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图 6.12 “ 方 框 ?选项 卡 的 设置 
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图 6.13 “边框 ”选项 卡 的 设置 
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图 6.14 将 自 定义 的 类 应 用 于 网 页 元 素 


6.3.4 动态 链接 样式 的 应 用 


简单 的 CSS 链接 样式 可 以 在 页 面 属性 中 的 “链接 (CSS)” 选 项 卡 中 设置 。 设 置 方法 已 
在 6.1 节 例 6.3 中 讲 过 。 


网 站 规划 与 网 页 设计 


但 是 , 例 6.6 中 建立 了 较为 复杂 的 CSS 链接 样式 。 当 鼠标 经 过 链接 文字 时 ,文字 颜 
色 会 变色 .字体 样式 变 粗 、 出 现 背 景 颜色 .文字 修饰 有 下 划 线 等 。 这 里 讲解 两 个 重要 的 知 
识 点 : 如 何 建立 CSS 链接 样式 和 如 何 调用 外 部 CSS 样式 。 


1. 建立 CSS 链接 样式 
(1) 单 击 “CSS 样式 ”面板 中 的 “新 建 CSS 规则 ”按钮 ,弹出 “新 建 CSS 规则 ”对 话 框 ， 
设置 “选择 器 类 型 "为 复合 内 容 ( 基 于 选择 的 内 容 )”, 在 “选择 嚣 名称” 下拉 列表 中 选择 a: 
link( 链 接 后 效果 ) ,选择 “规则 定义 ”在 “(新 建 样 式 表 文件 )”, 如 图 6. 15 所 示 。 单 击 “确定 ” 按 
钮 ,弹出 “保存 样式 表 文件 为 ”对话 框 ,如 图 6. 16 所 示 。 选 择 存储 路 径 和 输入 文件 名 , 单 击 
“保存 ”按钮 退出 。 弹 出 *a:link 的 CSS 规则 定义 ”对 话 框 ,定义 “字体 颜色 ”为 灰色 (#666)， 
“字体 修饰 ”为 “无 ”。 
新 建 C55 规则 
选择 器 类 型 - 
为 CSs 规则 选择 上 下 文选 择 器 类 型 
复合 内 容 ( 基于 选择 的 内 容 ) 
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图 6.15 设置 链接 的 CSS 样式 
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_ 〇 数据 源 
了 IE 加 OO 
EP 
文件 名 加 : [waste 保存 G) 
保存 类 型 加。 | 样式 表 文 件 fr cs:) 国 Ca 
mL ssywaster css 
相对 于 ; [文档 回 
在 站 点 定义 中 更 改 默 认 的 链接 相对 于 


图 6.16 “保存 样式 表 文 件 为 对话 框 
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(2) 打开 “CSS 样式 ?面板 ,选中 a:link, 右 击 , 在 弹出 快捷 菜单 中 选择 “复制 ”命令 ,如 
图 6. 17 所 示 ,弹出 “复制 CSS 规则 ”对 话 框 ,如 图 6. 18 所 示 。 打 开 * 选 择 器 名 称 " 下 拉 列 
表 , 选 择 a:visited, 不 对 样式 做 任何 修改 , 则 链接 后 与 访问 后 效果 一 致 。 


选择 器 类 型 : 
为 CSs 规则 选择 上 下 文选 择 器 类 型 
复合 内 容 ( 基于 选择 的 内 容 ) 


图 6.17 复制 CSS 样式 图 6.18 “复制 CSS 规则 "对话 框 


(3) 再 次 复制 a:link 样式 。 这 次 “选择 器 名 称 ” 选 择 a: hover, 单 击 “ 确 定 ” 按 钮 。 在 
“CSS 样式 ”面板 中 ,选中 a:hover, 单 击 “CSS 样式 ”面板 右 下 角 的 “编辑 样式 ”按钮 漳 , 弹 
出 “a:hover 的 CSS 规则 定义 ”对 话 框 。 

(4) 在 “类 型 "选项 卡 中 , 设 定 颜色 为 白色 ,修饰 选中 “下 划 线 ”, 在 “粗细 ”下 拉 列 表 中 
选择 “ 粗 体 ”。 单 击 “ 背 景 ” 选 项 卡 ,设置 背景 颜色 为 橘 黄色 (#FC0) , 单 击 * 确 定 "按钮 。 


2. 调用 CSS 样式 
若 在 其 他 网 页 应 用 刚才 建立 的 CSS 样式 文件 , 则 应 如 何 调用 呢 ? 
假设 调用 名 为 aa. css 的 CSS 样式 文件 , 单 击 “CSS 样式 ?面板 中 的 “附加 样式 表 ? 按 钮 


昌 吕 ,弹出 “链接 外 部 样式 表 ” 对 话 框 ,在 "文件 /URL” 文 本 框 中 输入 外 部 CSS 文件 路 径 和 
文件 名 aa. css,“ 添 加 为 ”选择 “链接 " 单 选 按钮 ,将 新 建 的 样式 文件 链接 到 此 网 页 ,如 图 6. 19 


所 示 。 
链接 外 部 样式 表 

文件 /IELG): [ER 国 [mm 
添加 为 : @ 链接 上 [ 融 ] 
Solas Al 

所 体 吕 : 国 

您 也 可 以 畏 入 至 号 分 陋 的 媒体 关 弄 列表。 
Drewreaver 的 车 全 样式 到 可 以 帮助 您 起 步 


图 6. 19 “链接 外 部 样式 表 ” 对 话 框 


网 站 规划 与 网 页 设计 


6.3.5 ” 滤 镜 效果 的 应 用 


CSS 滤 镜 并 不 是 浏览 器 的 插件 ,也 不 符合 CSS 标准 ,而 是 微软 公司 为 增强 浏览 器 功 
能 而 特意 开发 并 整合 在 IE 浏览 器 中 的 一 类 功能 集合 。 由 于 下 浏览 器 有 着 广泛 的 使 用 范 
围 , 因 此 CSS 滤 镜 也 被 广大 设计 者 所 喜爱 。 

CSS 滤 镜 可 以 为 样式 控制 的 对 象 指定 特殊 效果 。 滤 镜 名称 及 其 对 应 功能 见 表 6. 1。 


表 6.1 滤 简 效果 
名 称 功 能 名 称 功 能 
Alpha 透明 效果 Blur 模糊 效果 
Chroma 将 指定 的 颜色 设置 成 透明 Dropshadow 投影 效果 
FlipH 进行 水 平 翻转 FlipV 进行 垂直 翻转 
Glow 发 光 效 果 Grayscale 产生 灰 阶 
Invert 反 转 底片 效果 Light 灯光 投影 
Mask 遮 单 Shadow 阴影 效果 
Wave 水 平 与 垂直 波动 效果 Xray 设置 X 光 效果 


注意 ; CSS 滤 镜 只 能 作用 于 有 区 域 限 制 的 对 象 ,如 表格 、 单 元 格 、 图 片 等 ,而 不 能 直接 
作用 于 文字 ,所 以 应 把 所 需要 增加 特效 的 文本 事先 放 在 单元 格 或 层 中 ,然后 对 单元 格 或 层 
应 用 CSS 样式 。 

【 例 6.7】 设置 图 像 的 半 透 明 效 果 , 具 体操 作 步 又 如 下 。 

(1) 新 建 一 个 网 页 ,网 页 背景 颜色 为 黑色 ,插入 两 幅 完 全 相同 的 图 像 。 

(2) 打开 “CSS 样式 ”面板 , 单 击 “ 新 建 CSS 规则 ”按钮 ,弹出 “新 建 CSS 规则 ”对 话 框 ， 
“选择 器 类 型 "为 “类 (可 应 用 于 任何 HTML 元 素 )”,“ 选 择 嚣 名称” 为 alpha,“ 规 则 定义 ” 
为 “( 仅 限 该 文档 )”, 单 击 “ 确 定 ” 按 钮 ,弹出 *. alpha 的 CSS 规则 定义 ”对 话 框 ,打开 “扩展 ” 
选项 卡 ,在 “ 滤 镜 "文本 框 中 输入 Alpha(Opacity 二 50), 单 击 “ 确 定 ” 按 钮 ,如 图 6. 20 所 示 。 


-alpha 的 CSS 规则 定义 


图 6.20 “. alpha 的 CSS 规则 定义 "对 话 框 
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(3) 在 文档 窗口 中 ,选中 图 像 ,在 “属性 ?面板 中 , 单 击 “类 ”下拉 列表 ,选择 alpha。 按 
下 Fl12 键 ,浏览 网 页 效果 ,如 图 6. 21 所 示 。 


图 6.21 alpha 滤 镜 网 页 效果 图 


【 例 6.8】 设置 图 像 的 模糊 效果 ,具体 操作 步骤 如 下 。 

(1) 打开 *CSS 样式 ”面板 , 单 击 “ 新 建 CSS 规则 ”按钮 ,弹出 “新 建 CSS 规则 ”对 话 框 ， 
“选择 器 类 型 ?为 “类 (可 应 用 于 任何 HTML 元 素 )”“ 选 择 嚣 名称” 为 blur, “规则 定义 ”在 
“ 仅 限 该 文档 ”, 单 击 “ 确 定 ” 按 钮 ,弹出 “blur 的 CSS 规则 定义 ”对 话 框 , 单 击 “ 扩 展 ” 选 项 

上 ,在 “ 滤 镜 ”文本 框 中 输入 blur(Add 王 0,. Direction 一 45, Strength 一 20), 单 击 “ 确 定 ” 
按钮 。 

(2) 在 文档 窗口 中 选中 图 像 ,在 “属性 ”面板 中 ,打开 “类 ”下 拉 列 表 选 择 类 名 blur。 

按 快捷 键 F12 浏览 网 页 效果 ,如 图 6. 22 所 示 。blur 滤 镜 效果 与 Photoshop 中 的 高 斯 
模糊 非常 相似 。 


图 6.22 blur 滤 镜 网 页 效果 


CSS 滤 镜 样式 非常 多 ,可 以 在 不 使 用 大 型 图 形制 作 软 件 的 基础 上 制作 出 绚丽 的 特 
效 。 由 于 篇 幅 有 限 , 这 里 就 不 一 一 介绍 了 。 


6.4 应 用 CSS+Div 进行 网 页 布局 


CSS 十 Div 是 网 站 标准 (或 称 “Web 标准 ”) 中 常用 术语 之 一 , 它 是 一 种 网 页 的 布局 方 
法 , 它 有 别 于 传统 的 HTML 网 页 设计 语言 中 的 表格 (table) 定 位 方式 ,可 实现 网 页 页 面 内 
容 与 表现 相 分 离 。 

利用 CSS 样式 还 可 以 代替 表格 进行 网 页 布局 。 本 节 以 例 6. 5 为 例 ,讲解 如 何 利 用 
Div 标签 和 CSS 样式 的 定义 进行 网 页 的 排版 ,制作 过 程 如 下 。 
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1. 分 析 网 页 结构 header 
例 6.5 中 的 网 页 布局 如 图 6. 23 所 示 。 
2. 模块 拆 分 


一 个 总 的 Div 标签 包含 了 4 个 Div 标签 。 

(1) container: 最 大 的 容器 ,将 所 有 内 容 包含 
在 内 。Width: 950px。 二 

(2) header: 网 站 头 部 图 标 。 包含 了 一 幅 家 具 图 6.23 网 页 布局 图 
图 像 和 Flash 动画 。Width: 950px, Height: 260px。 

(3) leftnav: 左 侧 导航 条 。Width: 200px, 浮 动 为 左 对 齐 。 

(4) content: 网 站 的 主要 内 容 。 左 侧 边界 为 200px。 

(5) footer: 网 站 底 栏 ,包含 版 权 信息 等 ,设置 “清除 ”为 “两 者 ”。 


3. 定义 Div 标签 的 CSS 样式 


定义 页 面 属性 和 特定 ID 的 Div 标签 的 CSS 样式 。 

首先 创建 本 地 站 点 ,站 点 中 包括 两 个 子 文件 夹 images 和 css, 分 别 用 于 存储 图 像素 材 
和 CSS 样式 文件 。 

(1) 定义 页 面 属性 。 单 击 “ 属 性 ”面板 中 的 “页 面 属性 ”按钮 ,弹出 “页 面 属性 ”对 话 框 ， 
设置 背景 颜色 为 浅黄 色 (#ff9) ,字体 大 小 为 14 像素 ,页 边 距 均 为 0; 定义 网 页 标题 为 * 汀 
兰 制作 室 "。 

(2) 定义 “#containter” 的 CSS 样式。 打开 “CSS 样式 "面板 , 单 击 “ 新 建 CSS 规则 ” 按 

钮 ,在 弹出 的 “新 建 CSS 规则 ”对 话 框 中 ,如 图 6. 24 所 示 ,“ 选 择 器 类 型 "设置 为 ID( 仅 应 用 
于 一 个 HTML 元 素 ) ,在 “选择 器 名 称 " 文 本 框 中 输入 # containter,“ 规 则 定义 ”为 “(新 建 
样式 表 文 件 )”, 单 击 “ 确 定 ” 按 钮 ,弹出 “保存 样式 表 文件 ”对 话 框 ,选择 文件 存储 路 径 和 文 
件 名 为 css/master. css, 单 击 “ 保 存 ” 按 钮 。 弹 出 “# container 的 CSS 规则 定义 ”对 话 框 ， 
单 击 “ 方 框 ” 选 项 卡 , 输 入 “宽度 ”为 950 像素 ,填充 均 为 0, 边 界 上 、 下 均 为 0, 左 、 右 设置 为 
自动 ; 单 击 “ 背 景 "选项 卡 ,背景 颜色 为 深 红色 (#900)。 
(3) 定义 “#header” 的 CSS 样式 。 与 步骤 (2) 相 同 ,在 “选择 器 名 称 ” 文 本 框 中 输入 
“#header”, “规则 定义 ”为 master. css。 此 时 弹出 “# header 的 CSS 规则 定义 ”对 话 框 。 
单 击 “ 方 框 " 选 项 卡 , 设 置 宽度 为 950 像素 ,高 度 为 110 像素 ,填充 均 为 0, 边 界 均 为 0; 单 击 
“背景 ?选项 卡 ,选择 背景 图 像 为 “. . /images/biaoti0. jpg”。 

(4) 定义 “#1leftnav” 的 CSS 样式 。 与 步骤 (2) 相 同 ,在 “选择 器 名 称 ” 文 本 框 中 输入 间 
leftnav, 在 “#1leftnav 的 CSS 规则 定义 ?对 话 框 中 , 单 击 * 方 框 ?选项 卡 .设置 宽度 为 200 像 
素 , 浮 动 : 左 对 齐 ,边界 和 填充 均 为 0。 

(5) 定义 “# content” 的 CSS 样式 。 与 步骤 (2) 相 同 , 在 “选择 器 名 称 ” 文 本 框 中 输入 
“ 井 content”, 在 “并 content 的 CSS 规则 定义 "对话 框 中 , 单 击 “ 背 景 " 选 项 卡 , 设 置 背 景 为 
深 红色 (#390000); 单 击 “ 方 框 ”选项 卡 , 不 设置 填充 ,左边 界 为 200 像素 ,其 余 均 为 0。 
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新 建 CSS 规则 


选择 器 类 型 : 
为 Css 规则 选择 上 下 文选 择 器 类 型 。 
0( 如 应 用 于 一 个 HTML 元 素 ) 


选择 器 名 称 : 
选择 或 输入 选择 器 名 称 . 


#containter 


和 RE 用 矶 
有 了 D 为 "containter“ 的 TNL 元 素 。 


ER 国 


图 6.24 “新 建 CSS 规则 ”对 话 框 


(6) 定义 “ 间 footer” 的 CSS 样式 。 与 步 又 (2) 相 同 ,在 “选择 嚣 名称” 文本 框 中 输入 
“footer”, 在 “#footer 的 CSS 规则 定义 ”对 话 框 中 , 单 击 " 类 型 "选项 卡 ,设置 字体 大 小 
为 12 像素 , 行 高 为 20 像素 ,颜色 为 白色 ; 单 击 “ 区 块 ”选项 卡 , 文 本 居中 对 齐 ; 单 击 “ 背 景 ” 
选项 卡 ,设置 背景 颜色 为 黄 褐色 (并 960); 单 击 * 方 框 ?选项 卡 ,为 消除 前 面 设置 浮动 左 对齐 
的 影响 将 “清除 ?设置 为 “两 者 ”。 

4. 在 网 页 中 添加 Div 标签 


(1) 单 击 “ 插 入 " 栏 一 “常用 ”按钮 组 “插入 Div 标签 ”按钮 图 ,弹出 “插入 Div 标签 ?对话 
框 ,如 图 6. 25 所 示 。 在 “插入 ”下 拉 列 表 中 选择 “在 插入 点 ”, 在 ID 下 拉 列 表 中 选择 container 
项 , 单 击 “ 确 定 ” 按 钮 。 
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图 6.25 “插入 Div 标签 "对 话 框 


(2) 将 光标 置 于 container 容器 内 ,操作 同步 又 (1) ,打开 * 搬 入 Div 标签 "对 话 框 ,在 
ID 下 拉 列 表 中 选择 header, 单 击 “ 确 定 ” 按 钮 。 

(3) 操作 同步 又 (1) .依次 插入 leftnav、content,footer 的 Div 标签 ,结果 如 图 6. 26 
所 示 。 

注意 : 最 外 层 的 Div 的 ID 为 container, 其 他 的 Div 标签 均 包 含 在 containter 中 ,除了 
container 外 ,其 他 都 是 并 列 关 系 , 顺 序 为 header、leftnav、content、footer。 操 作 方 法 是 首 


让 
NT 


图 6.26 插入 指定 ID 的 Div 标签 


先 插入 containter, 然 后 可 切换 到 代码 视图 ,光标 放 在 一 div id 一 "container" 二 … 一 /div 二 
之 间 , 然 后 再 单 击 “插入 Div 标签 "按钮 ,分 别 插入 其 他 的 Div 标签 。 


5. 在 Div 中 插入 网 页 内 容 


(1) 单 击 header 区 域 , 插 入 Flash 动画 flash/9. swf, Flash 文件 是 矢量 图 形 , 可 改变 
其 尺寸 而 不 影响 动画 的 浏览 效果 ,因此 ,设置 swf 文件 尺寸 为 950X260( 像 素 ) ,设置 背景 
为 透明 。 

(2) 单 击 leftnav 区 域 ,插入 图 像 images/xong. gif, 输 入 分 店 的 联系 电话 。 

(3) 单 击 content 区 域 , 单 击 * 插 人?” 栏 一 Spry 按钮 组 一 “Spry 选项 卡 式 面板 ”按钮 ,如 
图 6. 27 所 示 , 即 插入 Spry 选项 卡 式 面板 。 

区 远 昌 | 加 加 马 国 轧 加 辐 | 虹 加 加 巴 马 
“Spry 选 项 卡 式 面板 "按钮 
图 6.27 Spry 选项 卡 式 面板 


插入 Spry 选项 卡 式 面板 后 , 需 对 它 进行 编辑 ,其 “属性 ”面板 如 图 6. 28 所 示 。 单 击 
“Spry 选项 卡 式 面 板 ” 外 框 ,在 “属性 ”面板 中 单 击 “ 十 ”按钮 添加 标签 ;输入 标签 名 称 和 内 
容 , 在 CSS 面板 处 修改 标签 和 内 容 的 边框 背景 字体 和 链接 效果 等 ,如 图 6. 29 所 示 。 


Spry 选项 卡 式 面板 : TabbedParslsl 


“TabbedPanelsTab” 的 屋 性 


or-user-s.., none 
background-.… 图 #330000 

border-botton solid lpx 新生 
border-left solid lps #fff 


图 6.28 编辑 “Spry 选项 卡 式 面板 ” 图 6.29 编辑 “Spry 选项 卡 式 面板 ” 
CSS 样式 
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(4) 单 击 “footer” 区 域 ,输入 版 权 所 有 和 联系 方式 等 信息 。 
保存 网 页 , 按 快捷 键 F12 浏览 并 检查 网 页 效果 。 


本 章 主要 介绍 了 CSS 样式 的 分 类 ,语法 结构 创建 与 应 用 CSS 十 Div 进行 网 页 布局 等 
内 容 。 通 过 应 用 CSS 样式 ,可 使 网 页 样式 更 加 灵活 多 样 ,易于 网 页 样式 的 设置 与 更 新 。 


练 习 题 
(1) 什么 是 CSS? 选择 器 分 为 哪 几 类 ? 


(2) 定义 CSS 样式 有 什么 好 处 ? 
(3) 如 何 调用 外 部 样式 表 文 件 ? 


上 机 实验 
1. 实验 要 求 
(1) 利用 CSS 制作 如 图 6. 30 所 示 精 美的 网 页 。 


西 芒 简介 


五 个 之 一 ， 是 一人 纪检 轿 为 主 付 避 潜 扫 区 ， 


TR 


B. XDA 


土地 看 名 呈 二 主 区 的 24 而 
士 地 看 积 上 全 区 的 s0%， 人 吕 仅 占 全 区 815%。 上 1551 年 和 
制定 朝 关 沈 民品 的 对 第 ， 并 大 浅 居民 经 澡 


这 认 入 主 人 8 民 记 洗 区 ， 其 本 加 详 、 门 并 、 竺 关 等。 来 识 吕 这 友 豆 尔 沁 人 和 辣 人 ,七 人 
天 多 上 ,Rarrr 二 人 - 


图 6.30 网 页 效果 图 
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要 求 : 根据 给 定 的 素材 ,首先 设置 页 面 属性 ,其 次 定义 特定 ID 的 Div 标签 的 CSS 样 
式 , 然 后 插入 Div 标签 ,在 Div 中 插入 网 页 元 素 ， CT 
最 后 通过 定义 类 ,设置 图 像 CSS 样式 。 

(2) 在 网 页 中 添加 CSS 扩展 效果 : 滤 镜 。 

要 求 : 制作 投影 字体 、 发 光 字 体 、 图 像 的 透 
明 效 果 、 图 像 的 波浪 效果 等 ,如 图 6.31 所 示 。 


2. 背景 知识 


glow 


根据 本 章 所 学 的 CSS 十 Div 网 页 布局 技术 ， 
再 综合 前 面 所 学 的 创建 站 点 及 编辑 网 页 的 知识 ， 
制作 精美 的 网 页 及 应 用 CSS 扩展 功能 。 


3， 实验 准备 工作 图 6.31 滤 镜 效果 


将 实验 素材 、 网 页 元 素 及 网 页 样 图 ,发 送 到 学 生 的 主机 中 ,以 供 学 生 参 考 使 用 。 
4. 课时 安排 

上 机 实 训 课 时 安排 为 2 课时 。 

5. 实 训 指导 


1) 利用 CSS 样式 表 制 作 精美 的 网 页 

(1) 新 建 一 个 本 地 站 点 ,在 站 点 内 新 建 两 个 子 文件 夹 images 和 css, 将 图 像素 材 保存 
到 images 文件 夹 。 新 建 一 个 网 页 ,保存 为 index. htm。 

(2) 页 面 属性 的 设置 : 单 击 “ 属 性 ”面板 中 的 “页 面 属性 ”按钮 ,在 “页 面 属性 ”对 话 框 
中 ,设置 背景 图 像 为 images/bg. jpg, 页 边 距 均 为 0, 设 置 字体 大 小 为 14 像素 ,字体 颜色 为 
灰色 (#666)。 

(3) 在 “CSS 样式 ”面板 中 , 单 击 “ 新 建 CSS 规则” 按钮, 弹出“ 新建 CSS 规则 ”对 话 框 ， 
“选择 器 类 型 "为 “ID( 仅 应 用 于 一 个 HTML 元 素 )”“ 选 择 器 名 称 ” 中 输入 “# image01” 
(这 个 区 域 用 于 放置 图 像 ), “规则 定义 ”为 “新 建 样式 文件 ”, 保 存 样式 文件 在 css 文件 夹 
中 ,并 将 其 命名 为 main. css; 弹 出 “#images01 的 CSS 规则 定义 ”对 话 框 , 单 击 “ 方 框 ” 选 项 
卡 , 设 置 宽度 为 200 像素 ,浮动 为 左 对 齐 ,填充 均 为 3 像素 ,上 边界 为 500 像素 ,左边 界 . 右 
边界 和 下 边界 均 为 30 像素 ;选择 “区 块 ”选项 卡 ,文本 对 齐 方 式 为 居中 。 

(4) 新 建 一 个 “# content” 选 择 器 样式 ,定义 在 main. css 文件 。 弹 出 “# content 的 
CSS 规则 定义 ”对 话 框 , 单 击 “ 类 型 "选项 卡 , 设 置 行 高 为 20 像素 ; 单 击 “ 区 块 ”选项 卡 , 设 置 
文本 缩 进 20 像素 ; 单 击 “ 方 框 ”选项 卡 , 设 置 宽度 为 600 像素 ,填充 均 为 30 像素 ,上 边界 为 
200 像素 ,左边 界 为 320 像素 ,右边 界 和 下 边界 均 为 30 像素 。 

(5) 重 定义 标签 H1: 单 击 “ 类 型 ?选项 卡 .设置 字体 大 小 为 24 像素 , 行 高 为 35 像素 ， 
粗细 为 特 粗 ,颜色 为 深 绿色 (#009900)。 

(6) 重 定义 标签 img: 单 击 “ 方 框 ” 选 项 卡 ,设置 填充 均 为 3 像素 , 单 击 “ 边 框 ” 选 项 卡 ， 
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边框 均 设置 为 : 样式 为 实 线 ,宽度 为 1 像素 ,颜色 为 灰色 (# 并 666666) 。 

(7) 插入 两 个 Div 标签 ,ID 分 别 为 image01 和 content, 然 后 在 image01 中 插入 两 幅 
图 像 ,在 content 中 输入 文本 内 容 , 完 成 实验 要 求 的 网 页 制作 。 

2) 在 网 页 中 添加 CSS 扩展 效果 : 滤 镜 

(1) 新 建 一 个 类 DropShadow, 单 击 “ 扩 展 ” 选 项 卡 ,在 “ 滤 镜 ”下 拉 列 表 中 选择 
DropShadow ,参数 设置 DropShadow(Color 二 #000000,offx 二 2,offy 二 2,Positive 二 45)， 
如 设置 为 不 同 的 参数 ,其 效果 不 同 。 

(2) 插入 一 个 表格 ,在 单元 格 中 输入 文字 ,选中 单元 格 , 在 “属性 ?面板 中 选择 类 
DropShadow。 

(3) 新 建 一 个 类 Glow, 参 数 设置 为 Glow(Color 二 # ffff00,Strength 一 5) ,然后 在 单 
元 格 中 输入 文本 ,选中 单元 格 , 套 用 类 Glow 的 样式 。 

(4) 新 建 一 个 类 Wave, 参数 设 置 为 Wave(Add 二 0,Freq 二 5,LightStrength 二 5， 
strength 一 5) ,插入 图 像 ,选中 图 像 套 用 类 Wave 样式 。 

(5) 新 建 一 个 类 Chroma, 参 数 设置 为 Chroma(Color 王 #ff0000), 插 入 图 像 , 选 中 图 
像 套 用 类 Chroma 样式 。 


本 章 将 主要 介绍 通过 表单 实现 浏览 器 与 服务 器 之 间 的 信息 交流 。 在 WWW 上 表单 
被 广泛 用 于 各 种 信息 的 收集 和 反馈 。 如 图 7. 1 所 示 淘 宝 网 的 会 员 登 录 网 页 ,即使 用 表单 
技术 。 


淘宝 网 hs" 


注册 淘宝 会 员 
区 snaa 一 


名 全 下 有 好 侦 ! Bidroo0 万 人 商品 人 过 


Rr srsges. 
免费 开 网 后 ! 加 本色 六 光 友 。 


起 人 所 社区! 向 动 -天 。 


6 dg 和 您 经 是 去 讨 宝 会 只? 由 此 车 入 
0 乔 开 全 员 ( 第 欠 中 文 玫 户 ) 由 此 六 入 图 归 休 中 广 用户 由 此 过 朋 
0 保护 人 的 槛 码 ， 请 阅 雪 密 码 安全 周二 


0 ， 本 [| a | 
防止 病毒 或 者 让 马 窗 束 您 的 账户 信息 ， 在 线 检查 您 的 电脑 是 否 安全 。 J 


图 7.1 表单 应 用 : 淘宝 网 的 会 员 登 录 页 面 


【本 章 学 习 目 标 】 


。 了 解 表单 的 功能 与 用 途 :; 

。 掌握 插入 表单 的 方法 ; 

。 掌握 在 表单 中 插入 表单 对 象 的 方法 ; 
。 利用 表单 制作 用 户 注册 网 页 。 


7.1 实例 导入 : 利用 表单 创建 用 户 信 息 注册 表 


表单 是 使 网 站 实现 交互 功能 的 重要 途径 ,通过 表单 可 以 收集 站 点 访问 者 的 信息 。 表 
单 可 以 用 作 调 查 工具 和 收集 客户 登录 信息 ,也 可 用 于 制作 复杂 的 电子 商务 系统 。 
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一 般 表单 的 工作 流程 如 图 7.2 所 示 。 


提交 二 | 由 应 用 程序 
包含 表单 -一 一 | | || 二 | 对 表单 进行 
的 网 页 “提供 es 一 | 信息 处 理 


将 处 理 信息 反馈 到 浏览 器 
图 7.2 表单 提交 后 的 处 理 流程 


(1) 访问 者 在 浏览 有 表单 的 网 页 时 ,填写 必需 的 信息 ,然后 按 下 按钮 提交 。 

(2) 这 些 信 息 通 过 Internet 传送 到 服务 器 上 。 

(3) 服务 器 上 的 表单 处 理应 用 程序 (CGD ,或 脚本 程序 (ASP、PHP) 对 数据 进行 处 理 。 

(4) 数据 处 理 完毕 后 ,服务 器 反馈 处 理 信息 。 

从 表单 的 工作 流程 来 看 ,表单 的 开发 分 为 两 部 分 : 一 是 在 网 页 上 制作 的 具体 表单 项 
目 , 这 一 部 分 称 为 前 端 ,主要 在 Dreamweaver 中 制作 ; 另 一 部 分 是 编写 处 理 表单 信息 的 应 
用 程序 ,如 ASP.CGI.PHP JSP 等 ,这 一 部 分 称 为 后 端 。 本 章 内 容 主 要 讲解 前 端的 设计 ， 
后 端的 开发 将 在 网 络 程序 开发 流程 中 具体 介绍 。 

【 例 7.1】 利用 表单 创建 如 图 7. 3 所 示 的 用 户 信息 注册 表 。 


1 中 C 男 C 女 


| 个 人 豆 敌 ; 三 训 洲 己 游 冰 己 论 书 忆 上 网 
ER 
这 持 H 天 至 - [环宇 司 
ET EE] 


人 从 各; | 
ET 


| i 


图 7.3 会 员 信息 注册 表单 


本 实例 主要 涉及 以 下 知识 点 。 

(1) 布局 网 页 。 

(2) 创建 表单 。 

(3) 在 表单 中 插入 表单 对 象 。 

(4) 将 表单 信息 提交 到 网 络 管理 者 的 邮箱 。 


Cy [mi 规划 SI 页 设计 ] 


7.2 创建 表单 


表单 相当 于 一 个 容器 , 它 容纳 的 是 承载 数据 的 表单 对 象 ,例如 文本 框 复 选 框 等 。 
此 一 个 完整 的 表单 应 包括 两 部 分 : 表单 及 表单 对 象 , 二 者 缺 一 不 可 。 


1. 插入 表单 
插入 表单 常用 的 方法 有 以 下 两 种 。 
方法 一 ” 单 击 "插入 ” 栏 一 表单 "按钮 组 一 “表单 "按钮 图 , 即 在 网 页 中 插入 了 一 个 新 


表单 ,在 网 页 中 出 现 一 个 红色 的 虚线 框 ,如 图 7.4 所 示 。 
方法 二 ”选择 “插入 "菜单 一 “表单 “表单 "命令 , 即 可 插入 一 个 新 表单 。 


DW 文件 0) 编辑 (EF) 查看 (Y) 插入 0) 修改 (格式 (0) 命令 (c) 站 点 (5) 窗口 (ID) 帮助 00 
| 
J 回 |E 贡 图 | 癌 古 加 四 | 男 加 | 回 轿 听 | 铅 让 | 辐 必 芭 司 避 区 十 


ER 
LE 
| © Dt: [el 


| Na 3 : -| ”新 表单 
图 7.4 表单 及 表单 对 象 


表单 的 作用 是 当 访 问 者 单 击 表单 的 “提交 ”按钮 时 ,浏览 器 将 表单 对 象 所 包含 的 数据 
发 送 到 服务 器 ,因此 表单 对 象 必须 置 于 表单 中 。 


2. 设置 表单 属性 


单 击 “ 表 单 ”" 外 框 ,或 单 击 文档 窗口 左下 角 的 二 form 二 标签 ,选择 表单 , 即 可 在 “属性 ” 
面板 中 设置 表单 属性 ,如 图 7.5 所 示 。 


已 _B 标 中 [ 习 


Re 


图] 二 己 动作 「 


图 7.5 设置 表单 属性 


表单 各 项 属性 的 功能 如 下 。 

(1) 表单 ID: 表单 在 网 页 中 的 标识 。 

(2) 动作 : 指定 处 理 表 单 信息 的 服务 器 端的 应 用 程序 , 单 击 “ 浏 览 文件 ”按钮 ,查找 需要 
的 应 用 程序 ,或 者 直接 输入 应 用 程序 路 径 。 此 外 ,也 可 以 指定 电子 邮件 的 方式 处 理 表 单 , 例 
如 在 “动作 ”文本 框 中 输入 mailto: 电子 邮件 地 址 , 则 使 用 电子 邮件 的 方式 处 理 表单 数据 。 

(3) 方法 : 设置 表单 的 提交 方式 。 提 交 方式 有 三 种 : 默认 、POST.GET, 上 默认 值 为 POST。 

采用 GET 方式 提交 表单 时 是 将 数据 附 在 URL 后 发 送 , 即 所 传送 的 数据 会 在 浏览 器 
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的 地 址 中 显示 出 来 ,而 且 数 据 长 度 有 限制 。 采 用 POST 提交 方式 时 所 携带 的 数据 量 大 ， 
它 是 将 表单 中 的 数据 作为 一 个 文件 提交 的 ,不 会 将 内 容 附 在 URL 后 ,比较 适合 内 容 较 多 
的 表单 。 

(4) 编码 类 型 : 指定 对 提交 服务 器 进行 处 理 的 数据 使 用 MIME 编码 类 型 ,默认 设置 
为 application/x-www-form-urlencode, 通 常 与 POST 方法 协同 使 用 。 


7.3 插入 表单 对 象 


创建 表单 后 , 即 可 插入 表单 对 象 。 所 有 的 表单 对 象 将 被 放置 在 这 个 创建 表单 区 域 中 ， 
即 如 图 7.4 所 示 的 红色 虚线 框 中 。 


7.3.1 表单 网 页 的 布局 


包含 表单 的 网 页 这 里 仍 采用 表格 排版 方式 。 操 作 步 骤 如 下 。 

(1) 新 建 一 个 网 页 ,添加 页 面 背景 ,插入 一 个 表单 ,出 现 一 个 红色 虚线 框 。 

(2) 在 表单 中 ,插入 表格 ,采用 表格 排版 。 在 表格 中 ,插入 图 像 或 动画 、 文 本 加 以 修 
饰 ,并 应 用 CSS 样式 美化 网 页 ,如 图 7.6 所 示 。 

(3) 最 后 在 表格 中 插入 表单 对 象 。 


了 便于 你 委 加 委 程 奈 行 出 开展 隐 合 类 请 动 、. 探 高 我 们 隐 职 务 晤 条 ， 话 完 台 博导 以 下 迁 屿 内容。 


图 7.6 在 表单 中 插入 表格 


7.3.2 插入 和 编辑 表单 对 象 
常用 的 表单 对 象 主要 有 以 下 几 种 。 
1. 文本 字段 和 文本 区 域 


1) 文本 字段 

文本 字段 是 用 来 输入 文本 信息 的 。 

单 击 “ 插 入 ” 栏 一 “表单 ”按钮 组 一 “文本 字段 ”按钮 回 ,或 选择 “插入 ”菜单 一 “表单 ”一 
“文本 域 ?命令 ,弹出 “输入 标签 辅助 功能 属性 ?对 话 框 , 如 图 7.7 所 示 , 输 入 ID 和 标签 ,如 
ID:username, 标 签 : 用 户 名 , 单 击 “ 确 定 ” 按 钮 , 即 插入 了 一 个 文本 字段 对 象 ,如 图 7. 8 所 
示 。 单 击 文本 字段 对 象 , 在 “属性 ”面板 中 可 设置 “文本 字段 ”的 属性 ,如 图 7.9 所 示 。 

文本 字段 各 项 属性 的 功能 如 下 。 

(1) 文本 域 : 定义 文本 域 的 名 称 ,用 来 标识 文本 字段 的 唯一 性 。 
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萄 入 标签 辅助 功能 尾 性 


图 7.7 “输入 标签 辅助 功能 属性 ”对 话 框 


期 户 各 : 1 


图 7.8 插入 “文本 字段 ” 


字符 爽朗 信 ) 类 型 “单行 6) 个 多 行人 ) 个 害 码 P) 类 5) [无 
Dt 和 


三 SO 


图 7.9 设置 文本 字段 的 属性 


(2) 字符 宽度 : 输入 一 个 具体 的 数值 用 于 显示 最 大 的 字符 数 。 默 认 文本 字段 宽度 为 
20 个 字符 。 

(3) 最 多 字符 数 : 设置 文本 字段 中 可 以 输入 的 最 多 字符 数 。 

(4) 类 型 : 有 三 种 类 型 ,单行 .多 行 、 密 码 。 类 型 为 “密码 ”时 ,在 浏览 器 状态 输入 文 
本 ,文本 的 显示 方式 为 ee@ee@。 

(5) 初始 值 : 指定 当 表单 首次 载 和 时 显示 在 文本 字段 中 的 值 。 

2) 文本 区 域 

文本 区 域 也 是 用 来 输入 文本 信息 的 。 当 文本 字段 的 类 型 选择 为 “多 行 ? 时 , 即 是 文本 
区 域 。 其 属性 与 文本 字段 相同 。 

单 击 “ 插 入 ” 栏 一 “表单” 按钮 组 “文本 区 域 ”按钮 国 . 或 选择 “插入 "菜单 一 “表单 ”一 
“文本 区 域 ” 命 令 , 即 插入 “文本 区 域 ” 对 象 。 


2. 复 选 框 及 复 选 框 组 


1) 复 选 框 
复 选 框 是 指 从 一 组 选项 中 人 允许 选择 多 个 选项 。 操 作 步 又 如 下 。 
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单 击 “插入 " 栏 * 表 单 " 选 项 -~“* 复 选 框 ?按钮 加 ,或 选择 “插入 ” 某 单 “表单 选项 一 
“ 复 选 框 "命令 , 即 插入 “ 复 选 框 ”对象 。 

单 击 “ 复 选 框 " 对 象 ,在 “属性 ”面板 中 设置 “ 复 选 框 "* 的 属性 :“ 复 选 框 "的 名 称 、 选 定 
值 . 初 始 状 态 等 ,如 图 7. 10 所 示 。 


属性 
贺 村 本 名 称 选 定 值 o 陈 育 
Fe， 人 直选 四 


图 7.10 设置 复 选 框 的 属性 


2) 复 选 框 组 
由 于 “ 复 选 框 "通常 是 由 多 个 复 选 框 组 成 一 组 来 使 用 ,因此 Dreamweaver CS5 提供 了 
“ 复 选 框 组 ”的 功能 。 


单 击 “ 插 入 " 栏 一 “表单 "按钮 组 一 “ 复 选 框 组 "按钮 回 , 或 选择 “插入 ”菜单 一 “表单 ”一 
“ 复 选 框 组 ”命令 ,弹出 “ 复 选 框 组 ”对 话 框 ,如 图 7. 11 所 示 。 


布局 ， 使 用 : @ 执行 符 ( qhr》 标签) 
口 表格 


图 7.11 “ 复 选 框 组 "对话 框 


“ 复 选 框 组 "对话 框 中 相关 的 参数 功能 如 下 。 

(1) 名 称 : 定义 复 选 框 组 的 名 称 , 用 来 标识 整个 组 的 复 选 框 。 

(2) 添加 多 和 删除 加 ] 按 钮 : 分 别 用 来 增加 和 删除 复 选 框 。 

(3) 向 上 [和 和 向 下 [器 按钮 : 改变 复 选 框 顺序 。 

(4) 标签 : 定义 复 选 框 显示 的 文本 标签 。 

(5) 值 : 定义 “ 复 选 框 ” 的 选 定 值 。 

(6) 布局 ,使 用 : 选择 “换行 符 (二 br 二 标签 )" 单 选 按钮 则 使 用 换行 符 来 分 开 同一 组 中 
的 复 选 框 ; 选 择 “ 表 格 " 单 选 按 钮 则 会 自动 生成 一 个 表格 用 来 定位 复 选 框 。 

“ 复 选 框 组 ”对 话 框 设置 好 后 , 单 击 “确定 ”按钮 即 插入 了 复 选 框 组 。 


3. 单 选 按 钮 及 单 选 按钮 组 
1) 单 选 按钮 
“ 单 选 按钮 是 指 从 一 组 选项 中 只 能 选择 一 个 选项 。 其 操作 步骤 如 下 。 


Wx « 人 [LawMgSmRRi] 
单 击 "插入" 栏 “ 表 单 " 按 钮 组 一 “ 单 选 ” 按 钮 图 ,或 选择 “插入 ”菜单 一“ 表单 ”一 “ 单 
选 按 钮 ”命令 , 即 插入 单 选 按 钮 对 象 。 
单 击 单 选 按 钮 对 象 , 在 “属性 ”面板 中 设置 “ 单 选 按钮 "的 属性 :“ 单 选 按 钮 "的 名 称 、 选 
定 值 , 初 始 状 态 等 ,如 图 7. 12 所 示 。 


7.12 设置 单 选 按钮 的 属性 


2) 单 选 按钮 组 
由 于 “ 单 选 按 钮 ”通常 是 由 多 个 单 选 按钮 组 成 一 组 来 使 用 ,因此 Dreamweaver CS5 提 


供 了 “ 单 选 按 钮 组 ”的 功能 。 
单 击 “ 插 入 ” 栏 一 “表单 ”按钮 组 一 “ 单 选 按钮 组 ”按钮 回 , 或 选择 “插入 ”菜单 一 “表单 ”~ 
“ 单 选 按钮 组 ”命令 ,弹出 “ 单 选 按钮 组 ”对 话 框 ,如 图 7. 13 所 示 。 


x 
0 
i 上 mA | 
单 选 按钮: 夺 ] 忆 ] 回回 
[a ema 
单 选 单 选 
单 选 单 选 


布局 ， 使 用 : 人 换行 符 (<br> 标签) 
和 表格 


图 7.13 “ 单 选 按钮 组 ”对 话 框 
对 话 框 中 相关 的 参数 的 功能 与 复 选 框 组 相似 ,这 里 不 再 一 一 叙述 。 


4. 列表 /菜单 
“列表 ”和 “菜单 "可 以 在 有 限 的 空间 内 为 用 户 提供 更 多 的 选项 。.“ 列 表 ” 在 深 动 条 中 显 


示 选 项 值 ,并 允许 用 户 在 列表 中 选择 多 个 选项 。“ 菜 单 " 在 下 拉 式 菜单 中 显示 选项 值 , 只 允 
许 用 户 选择 一 个 选项 。 操 作 步 又 如 下 。 

单 击 “ 插 入 ” 栏 一 “表单 ”按钮 组 一 “选择 (列表 /菜单 )” 按 钮 图 ,或 选择 “插入 ”菜单 一 
“表单 ”>“ 选 择 ( 列 表 / 菜 单 )” 命 令 , 即 插入 列表 /菜单 对 象 。 

单 击 列表 /菜单 对 象 ,在 “属性 ”面板 中 设置 其 属性 ,如 图 7. 14 所 示 。 

列表 /菜单 各 项 属性 的 功能 如 下 。 

(1) 列表 /菜单 : 定义 “列表 /菜单 ”的 名 称 。 

(2) 类 型 : 指定 此 表单 对 象 是 下 拉 菜单 还 是 滚动 列表 。 


转 ] 选择 天 型 菜单 虽 .4 CR #0 本 


@ 
居中 月 二 区 有 多 
-Ee 


7.14 设置 列表 /菜单 对 象 的 属性 


(3) 高 度 : 若 选择 为 列表 ,用 户 可 以 设置 列表 在 不 滚动 情况 下 显示 出 来 的 选项 行 。 
若 选 择 为 菜单 ,此 项 不 可 设置 。 

(4) 选 定 范围 : 若 选择 为 "列表 ”, 可 选 定 “ 人 允许 多 选 复 选 框 , 则 用 户 可 从 列表 中 选择 
多 个 选项 ; 若 选择 为 “菜单 ”, 此 项 不 可 设置 。 

(5) 初始 化 时 选 定 : 设置 首次 载 人 表单 时 “列表 /菜单 "定位 在 哪 一 个 选项 。 

(6) 列表 值 : 单 击 该 按钮 ,打开 “列表 值 ” 


到 
对 话 框 ,如 图 7. 15 所 示 。 单 击 “ 项 目标 签 " 下 “要 [la 
方 ,输入 列表 文本 ,光标 右 移 ,输入 列表 值 。 中 本 EE 户 二 | 


单 击 加 号 按钮 团 添加 列表 项 目 . 单 击 减 号 按 
钮 加 删除 列表 项 目 ,选中 列表 项 目 . 单 击 向 
上 回 或 向 下 加 的 按钮 改变 列表 项 目的 顺序 。 
最 后 , 单 击 “ 确 定 "按钮 。 图 7.15 “列表 值 "对 话 框 


5. 跳 转 菜单 

跳 转 菜单 对 象 与 列表 /菜单 对 象 有 所 不 同 , 跳 转 菜单 的 每 一 个 列表 项 目 都 链接 到 一 个 
URL 地 址 。 一 般 常用 于 友情 链接 。 操 作 步骤 如 下 。 

单 击 “ 插 入 " 栏 一 “表单 "按钮 组 一 “ 跳 转 菜 单 ” 按 钮 贱 . 或 选择 “插入 ”菜单 一 “表单 ”一 
“ 跳 转 菜单 ?命令 ,弹出 * 插 入 跳 转 菜单 "对话 框 ,如 图 7. 16 所 示 。 


区 


助 


出 


X 本 :PE 


打开 URL 于 : | 主 窗口 ” 
菜单 iD unpilenu2 
选项 : 三 莱 单 之 后 活 入 前 往 按 乌 
厂 更 次 URL 后 选择 第 一 个 项 目 


图 7.16 “插入 跳 转 菜单 "对 话 框 
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对 话 框 中 相关 参数 的 功能 如 下 。 

(1) 首先 在 “文本 ”文本 框 输入 文本 ,在 “选择 时 , 转 到 URL” 文 本 框 中 输入 URL 链接 
地 址 。 

(2) 单 击 添加 按钮 轩 添 加 菜单 项 , 单 击 减 号 按钮 四] 删除 菜单 项 , 单 击 向 下 加] 或 向 上 
的 按钮 四 改变 菜单 项 的 前 后 顺序 。 

(3) 如 果 选 中 “菜单 之 后 插入 前 往 按钮 " 复 选 框 , 则 在 浏览 网 页 时 ,选择 下 拉 菜 单 中 的 
某 一 个 选项 ,不 直接 跳 转 , 单 击 “ 前 往 ” 按 钮 后 才 跳 转 。 最 后 , 单 击 “ 确 定 ” 按 钮 。 


6. 文件 域 


文件 域 的 作用 是 用 户 在 表单 中 选择 文件 ,然后 将 选中 的 文件 发 送 到 服务 器 。 例 如 : 
用 户 在 撰写 电子 邮件 时 ,采用 文件 域 的 方式 ,将 
文件 作为 附件 传送 ,如 图 7. 17 所 示 。 
操作 步骤 如 下 。 图 7.17 在 表单 中 上 传 附加 文件 作为 附件 
单 击 “ 插 入 栏 ” 一 “表单 ”按钮 组 一 “文件 域 ” 
按钮 图 ,或 选择 * 插 入 ”菜单 一 表单 ”一 文件 域 " 命 令 , 即 插入 文件 域 对 象 。 单 击 文件 域 
对 象 , 在 "属性 ”面板 中 设置 文件 域 的 属性 ,包括 文件 域 的 名 称 、 字 符 宽度 、 最 多 字符 数 等 ， 
如 图 7. 18 所 示 。 


上 人 了 件 : [BE...] 


属性 
文件 域名 称 字符 敲 度 类 了 
回 和 加 


图 7.18 设置 文件 域 的 属性 


7. 隐藏 域 


隐藏 域 通常 用 来 在 表单 之 间 传 递 数据 ,一 般 只 用 于 脚本 编程 。 操 作 步 又 如 下 。 
单 击 “ 插 入 栏 ”>“ 表 单 ” 按 钮 组 >“ 隐藏 域 ” 按 钮 欧 , 或 选择 “插入 ”菜单 一 “表单 ”一 
“隐藏 域 ?命令 , 即 插入 隐藏 域 对 象 。 


8. 按钮 


按钮 的 作用 是 控制 表单 操作 。 使 用 表单 按钮 将 输入 表单 的 数据 提交 到 应 用 程序 ,或 
者 重 置 该 表单 .也 可 以 用 来 执行 脚本 指定 的 自 定义 功能 。 操 作 步 又 如 下 。 

单 击 * 插 入 ?” 栏 一 "表单 "按钮 组 一 按钮 "按钮 加 .或 选择 “插入 "菜单 一“ 表单 ”>“ 按 钮 ” 
命令 , 即 插入 按钮 对 象 。 单 击 按钮 对 象 .在 “属性 ?面板 中 设置 按钮 的 属性 ,如 图 7. 19 所 示 。 


_ 上 按钮 名 称 值 D 胜 冯 动作 6 提交 素 单个 无 如 类 加 | 无 了 
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abnit 个 重 设 来 单 到) 


图 7.19 设置 按钮 的 属性 
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按钮 的 各 项 属性 的 功能 如 下 。 

(1) 按钮 名 称 : 定义 按钮 的 名 称 。 

(2) 值 : 显示 在 按钮 上 的 文本 。 

(3) 动作 : 确定 按钮 被 单 击 后 发 生 什么 动作 ,有 以 下 3 种 选项 。 

。 提交 表单 : 将 表单 中 的 数据 提交 到 应 用 程序 。 

。 重 设 表单 : 将 表单 对 象 恢复 为 初始 状态 。 

。 无 : 默认 状态 此 按钮 不 发 生 任何 动作 ,用 户 可 自 定义 要 实现 的 功能 。 


9. 图 像 域 


图 像 域 实质 上 是 以 图 像 形式 显示 的 提交 按钮 , 它 的 功能 等 同 于 提交 按钮 。 操 作 步 又 
如 下 。 


单 击 “插入 ” 栏 一 “表单 ”按钮 组 一 “图 像 域 ” 按 钮 加 ,或 选择 “插入 "菜单 一 “表单 ”一 


“图 像 域 " 命 令 , 即 插入 “图 像 域 " 对 象 。 单 击 图 像 域 ,在 “属性 ”面板 中 设置 图 像 域 的 属性 ， 
如 图 7. 20 所 示 。 


s/o me | NA 
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图 7.20 设置 图 像 域 的 属性 


图 像 域 的 各 项 属性 的 功能 如 下 。 

。 图 像 区 域 : 定义 图 像 域 的 名 称 。 

。 源 文件 : 选择 图 像 文 件 的 路 径 和 文件 名 。 

。 替换 : 输入 文本 , 当 图 像 不 能 正常 显示 时 ,文本 替代 图 像 ,或 在 图 像 正常 显示 时 ， 
鼠标 经 过 图 像 对 图 像 进 行文 字 注 释 。 


注意 : 定义 表单 对 象 的 名 称 时 最 好 不 要 用 中 文 和 特殊 字符 ,而 应 与 变量 名 命名 规则 
相同 。 


7.4 制作 用 户 注册 表 


本 节 讲 解 例 7. 1 所 举 创 建 用 户 信息 注册 表 的 制作 过 程 : 插入 一 个 表单 ,再 插入 表单 
对 象 ,而 浏览 者 在 浏览 本 网 页 时 ,填写 表单 信息 ,然后 将 信息 提交 到 网 络 管理 员 的 电子 邮 
件 地 址 中 。 网 络 管理 员 通 过 电子 邮件 来 收集 网 站 浏览 者 的 信息 。 操 作 步 又 如 下 。 

(1) 创建 一 个 本 地 站 点 ,在 本 地 站 点 内 创建 一 个 文件 夹 images 用 于 存储 图 像素 材 。 

(2) 创建 一 个 新 文档 ,文件 名 为 form. htm, 选 择 “ 修 改 " 菜 单一 “页 面 属性 ”命令 ,弹出 “页 
面 属 性 ?对 话 框 ,设置 网 页 标题 为 “假日 小 镇 咖啡 语 茶 ”, 设 置 背景 图 像 为 images/bg. jpg。 

(3) 单 击 “ 插 入 ” 栏 一 “常用 ”按钮 组 “图像” 按钮 ,插入 一 幅 图 像 images/01. jpg。 

(4) 单 击 “插入 ” 栏 一 “表单 "按钮 组 一 “表单 ”按钮 ,插入 一 个 表单 ,出 现 一 个 红色 的 虚线 


心 | 网 站 规划 与 网 页 设计 ] 


框 ,在 “属性 ”面板 中 设置 表单 的 属性 ,如 图 7. 21 所 示 。 在 “动作 ”文本 框 中 输入 “mailto: abc 
@163. com”;“ 方 法 ”为 YPOST”; 编 码 类 型 为 text/plain( 采 用 这 种 编码 类 型 时 ,浏览 者 以 
邮件 方式 提交 的 表单 内 容 将 以 正文 的 形式 发 送 到 网 络 管理 员 的 邮箱 里 ,否则 提交 表单 内 
容 将 以 附件 的 方式 发 送 ) 。 


] 已 上 四 Y 类 (0) | 无 ~ 
篇 码 类 到 | (ext/plsin Y 


图 7.21 实例 中 表单 属性 的 设置 


(5) 将 光标 置 于 表单 内 部 ,插入 表格 进行 页 面 的 布局 ,细节 不 再 叙述 。 输 入 文本 “ 假 
日 小 镇 用 户 资料 注册 ”。 

(6) 插入 文本 字段 。 单 击 “ 插 入 " 栏 一 “表单 "按钮 组 一 “文本 字段 "按钮 ,在 弹出 的 “ 输 
入 标签 辅助 功能 属性 ”对 话 框 中 输入 ID 为 username, 标 签名 为 “登录 名 ”, 在 “属性 ”面板 
中 设置 文本 字段 的 属性 ,类 型 为 “单行 ”。 

(7) 插入 文本 字段 ,设置 标签 名 为 “昵称 ”,ID 为 nicheng, 类 型 仍 为 “单行 "。 插 入 了 文本 
字段 ,标签 名 为 “年 龄 ,ID 为 age, 类 型 为 单行"。 插 入 文本 字段 ,设置 标签 名 为 E-mail, ID 
为 email, 类 型 为 “单行 ”。 插 入 文本 字段 ,设置 标签 名 为 “设置 密码 ”,ID 为 password, 类 型 为 
“密码 ”( 浏 览 者 访问 本 网 页 时 , 当 输 入 文本 时 ,不 显示 明文 ,而 显示 为 @@e@) 。 

(8) 插入 单 选 按钮 组 。 输 入 文本 为 “性 别 ”, 单 击 “ 插 入 ” 栏 一 表单 按钮 组 一 “ 单 选 按 
钮 组 ”按钮 ,在 “ 单 选 按钮 组 ”对 话 框 中 输入 名 称 为 sex, 输 入 “ 单 选 按 钮 项 目 ” 的 标签 和 对 
应 的 值 ,分 别 为 " 男 "“ 男 ”， 女 ”“ 女 ”。 

(9) 插入 复 选 框 组 。 输 入 文本 为 “个 人 喜好 ”, 单 击 “ 插 入 " 栏 一 表单 "按钮 组 一 “ 复 选 
框 组 ”按钮 ,在 “ 复 选 框 组 ”对 话 框 中 输入 名 称 为 xihao, 设 置 复 选 框 的 标签 分 别 为 “游泳 ”、 
“读书 ”“ 上 网 ”; 选 定 值 对 应 为 “游泳 ”“ 读 书 ”" 和 “上 网 ”。 

(10) 插入 列表 /菜单 。 输 入 文本 “请 选择 聊天 位 置 和 话题 ”, 单 击 “ 插 入 ” 栏 习 “表单 ” 
按钮 组 ~“ 选择 (列表 /菜单 )" 按 钮 .设置 ID 为 liaotian ,标签 为 “选择 聊天 室 ”。 选 中 列表 / 
菜单 对 象 , 在 “属性 ”面板 中 设置 其 属性 ,“ 类 型 "选择 “菜单 ”, 单 击 " 列 表 值 ”按钮 ,弹出 “ 列 
表 值 ” 对 话 框 ,分 别 在 此 处 输入 项 目标 签 和 对 应 的 值 ,如 图 7. 22 所 示 。 

(11) 插入 列表 /菜单 。 输 入 文本 “交谈 话题 " 单 击 “ 插 入 ” 栏 一 “表单 ”按钮 组 一 “选择 
列表 /菜单 "按钮 ,设置 ID 为 huati, 标 签 为 “交谈 话题 "。 选 中 列表 /菜单 对 象 ,在 “属性 ” 面 
板 中 设置 其 属性 。“ 类 型 "选择 “列表 ”, 单 击 “ 列 表 值 ”按钮 ,弹出 “列表 值 ” 对 话 框 ,在 此 处 
分 别 输入 项 目标 签 和 对 应 的 值 ,如 图 7. 23 所 示 。 


EE 对 
mlEl [sll 


图 7.22 实例 中 莱 单 列表 值 的 设置 图 7.23 实例 中 下 拉 列 表 的 列表 值 的 设置 
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(12) 插入 文本 区 域 。 单 击 “ 插 入 ” 栏 一 “表单 ”按钮 组 一 “文本 区 域 ”按钮 ,设置 ID 为 
qianming, 标 签名 为 “个 性 签名 ”。 单 击 文本 区 域 对 象 , 在 “属性 ?面板 中 设置 其 属性 ,类 
型 ?选择 “多 行 ”。 

(13) 插入 跳 转 菜单 。 输 入 文本 “转向 其 他 网 站 的 聊天 室 ”, 将 光标 置 于 此 文本 后 , 单 
击 “ 插 入 ” 栏 一 “表单” 按钮 组 一 “ 跳 转 菜 单 ” 按 钮 ,弹出 “插入 跳 转 菜单 ”对 话 框 ,在 此 处 设置 
相关 的 参数 ,如 图 7. 24 所 示 。 


加 日 器 


: ey Le JI ha sins con cn) 
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图 7.24 “插入 跳 转 菜单 "对 话 框 的 设置 


(14) 插入 按钮 : 单 击 “插入 ? 栏 一 "表单 ?按钮 组 一 “按钮 "按钮 插入 按钮 对 象 。 单 击 
按钮 对 象 ,在 “属性 ?面板 中 设置 值 为 “提交 ”动作 ”为 “提交 表单 ”。 再 插入 一 个 按钮 , 设 
置 “ 值 为“ 取消” 动作? 为" 重 设 表单 ”。 

至 此 ,包含 表单 的 例 7. 1 的 网 页 制作 完成 。 保 存 网 页 , 按 下 快捷 键 F12 ,浏览 并 检查 
网 页 。 在 网 页 中 逐 项 填写 表单 信息 , 单 击 “提交 ?按钮 后 ,表单 将 以 电子 邮件 的 方式 发 送 到 
abc@163. com 邮箱 。 


7.5 验证 表单 


利用 Dreamweaver 中 * 检 查 表单 ”的 内 部 行为 ,检查 浏览 者 填写 表单 对 象 的 内 容 是 否 
符合 事先 设 定 的 要 求 。 一 般 使 用 OnSubmit 事件 将 检查 表单 的 行为 附加 到 表单 上 , 当 用 
户 单 击 “提交 ?按钮 时 , 即 同时 对 多 个 表单 对 象 进行 检查 。 

分 析 7.4 节 的 例 7. 1 表单 实例 。 为 了 防止 浏览 者 不 填 某 些 信息 或 乱 填 信 息 , 这 里 设 
置 “ 登 录 名 ”“E-mail" 必 须 填写 ,年龄 ”必须 是 数字 且 数 字 范 围 为 1 一 99,E-mail 必须 是 
电子 邮件 的 格式 。 针 对 这 些 要求 ,其 操作 步骤 如 下 。 

(1) 选择 “窗口 "菜单 一 “行为 ”命令 ,打开 “行为 ”选项 卡 。 

(2) 单 击 文档 窗口 左下 角 的 二 form 二 标签 ,打开 “行为 ”选项 卡 , 单 击 “ 添 加 行为 ” 按 
钮 ,在 弹出 的 快捷 菜单 中 选择 “检查 表单 ”命令 ,弹出 “检查 表单 "对话 框 ,如 图 7. 25 所 示 。 

在 “检查 表单 "对话 框 中 ,在 * 域 ?列表 中 有 以 下 内 容 。 


图 7.25 “检查 表单 "对 话 框 


input“username”:“ 值 ”应 选择 “必需 的 " 复 选 框 ,“ 可 接受 ”选择 “任何 东西 " 单 选 按 钮 。 

input “nicheng”:“ 可 接受 ”选择 “任何 东西 " 单 选 按钮 。 

input “email”:“ 值 "应 选择 “必需 的 " 复 选 框 ,“ 可 接受 "选择 “电子 邮件 地 址 ” 单 选 
按钮 。 

input“age”:“ 可 接受 ”选择 “数字 ”从 1 到 99。 

(3) 在 “标签 检查 器 "面板 的 “行为 ”选项 卡 中 ,文件 选择 为 OnSubmit。 

保存 网 页 , 按 下 快捷 键 F12 浏览 并 检查 网 页 ,在 表单 中 随意 输入 内 容 , 单 击 “ 提 交 ” 按 
钮 就 可 能 会 出 现 如 图 7. 26 所 示 的 报错 提示 。 


假日 小 镇 用 户 间 料 注册 


个 性 答 名 : 


转向 其 他 网 站 的 了 天 室 。 [ 志 训 和 天 室 国 
[提交 到 请 
图 7.26 验证 表单 
本 章 小 结 


本 章 通过 制作 会 员 注 册 信 息 表 的 实例 讲解 ,重点 介绍 了 以 下 几 点 内 容 。 
(1) 插入 表单 及 表单 属性 的 设置 。 
(2) 在 表单 域 中 ,插入 表单 对 象 并 设置 表单 对 象 属性 。 
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(3) 将 表单 提交 到 管理 员 电 子 邮 箱 中 进行 处 理 。 
(4) 利用 Dreamweaver 中 “检查 表单 ”的 内 部 行为 ,检查 浏览 者 填写 表单 对 象 的 内 容 
是 否 符合 之 前 设 定 要 求 。 


练 习 题 


(1) 什么 是 表单 ? 简 述 表单 的 基本 工作 原理 。 
(2) 表单 对 象 包括 哪些 ? 
(3) 如 何 验证 表单 ? 


上 机 实验 


实验 要 求 


(1) 制作 用 户 信息 反馈 表单 创建 一 个 空白 表单 。 插 入 表格 ,利用 表格 排版 网 页 ,并 揪 
入 图 片 及 应 用 CSS 样式 美化 网 页 。 

(2) 插入 表单 对 象 ,并 通过 “属性 ”面板 设置 其 属性 。 

(3) 最 后 利用 Dreamweaver 内 部 行为 检查 表单 。 

反馈 意见 表单 页 面 效 果 如 图 7. 27 所 示 。 


用 户 信 妃 反 馈 表 单 


guestbook 


人 的 [| 
让 的 职业 ，[ 全 于 司 

电子 邮 件 : 
您 最 喜欢 本 出 版 社 出 颇 的 哪 一 本 书 :。 厂 Dreamweaver es5 全 Flash cs5 全 Firevorx cs5 三 Fhotozhop es5 
人 看 了 HK 果 :。， e 3 利好 C 好 C - 般 着 

人 认 力 最 好 的 多 媒体 技术 站 点 ， [5 本 交 隐 习 


| 习 
ET 


为 了 便于 您 做 加 本 网 站 开展 的 各 类 活动 、 提 高 夸 们 的 服务 质量 请 完整 秆 写 以 下 选 墙 内 容 。 


图 7.27 反馈 表单 效果 图 


2. 背景 知识 


本 章 所 学 的 插入 表单 .表单 对 象 以 及 Dreamweaver 内 部 行为 的 检查 表单 等 知识 ,再 
结合 前 面 所 学 的 网 页 编辑 页面 排 版 的 知识 ,制作 用 户 信息 反馈 表单 。 


3. 实验 准备 工作 
实验 素材 及 网 页 样 图 ,发送 到 学 生 的 主机 中 ,以 供 学 生 参 考 使 用 。 


网 站 规划 与 网 页 设计 


4. 课时 安排 
上 机 实验 课时 安排 2 课时 。 
5. 实 训 指导 


(1) 首先 创建 一 个 本 地 站 点 ,在 本 地 站 点 中 新 建 一 个 文件 夹 images ,将 图 像素 材 保 存 
在 此 文件 夹 。 创 建 一 个 网 页 ,保存 网 页 名 为 biaodan. htm, 插 入 一 幅 图 像 , 将 文件 命名 为 
images/bt. jpg。 

(2) 单 击 “插入 ? 栏 一 "表单 "按钮 组 一 “表单 "按钮 ,插入 一 个 表单 。 在 文档 窗口 中 出 
现 一 个 红色 的 虚线 框 。 在 “属性 ”面板 中 ,在 “动作 ”文本 框 中 输入 “mailto: 电子 邮件 地 
十” 

(3) 将 光标 置 于 虚线 框 内 ,插入 一 个 表格 ,采用 表格 进行 排版 。 

(4) 插入 一 个 文本 字段 对 象 ,输入 标签 名 为 “您 的 姓名 ”, 选 中 文本 字段 对 象 ,在 “ 属 
性 ?中 设置 文本 字段 的 属性 ,文本 域 " 为 username,“ 类 型 "为 “单行 ”。 

(5) 同 理 ,插入 单 选 按钮 组 . 复 选 框 组 ,滚动 列表 .下 拉 菜 单 . 文 本 域 等 ,并 设置 其 属 
性 ,然后 插入 “提交 ”按钮 和 “ 重 置 ”按钮 。 

(6) 选中 文档 窗口 左下 角 二 form 二 标签 ,选择 “窗口 "菜单 一 “行为 "命令 ,打开 “行为 ” 
选项 卡 ,添加 “检查 表单 行为。 仿照 前 文 所 讲述 方法 ,设置 username 和 email 为 必需 的 ， 
电子 邮件 地 址 按照 E-mail 格式 填写 。 

(7) 保存 网 页 , 按 快捷 键 F12 浏览 并 检查 网 页 。 


本 章 将 讲解 如 何 利 用 模板 和 库 设 计 风 格 一 致 的 网 站 。 使 用 模板 和 库 的 组 合 可 使 得 建 
设 网 站 和 维护 网 站 变 得 很 轻松 ,尤其 在 对 一 个 规模 较 大 的 网 站 进行 建设 与 维护 时 ,就 会 体 
会 到 模板 和 库 的 好 处 。 


【本章 学 习 目 标 】 


。 掌握 模板 的 创建 与 编辑 ; 
。 掌握 模板 的 应 用 与 更 新 ; 
。 了解 如 何 应 用 库 。 


8.1 实例 导入 : 利用 模板 生成 的 站 点 


-个 成 功 的 网 站 首先 要 具备 自己 独特 的 风格 ,才能 够 在 如 汪洋 大 海 的 网 络 中 脱 颖 而 
出 ,给 人 留 下 深刻 的 印象 。 但 仅 凭 网 站 中 的 一 两 个 较 好 的 页 面 , 很 难 收 到 良好 的 效果 , 因 
此 就 需要 整个 站 点 内 的 页 面体 现 出 统一 的 风格 。 通 过 使 用 模板 技术 即 能 够 生成 多 个 具有 
相似 结构 和 外 观 的 网 页 ,从 而 提高 网 页 制作 效率 。 

【 例 8.1】 利用 模板 和 库 技术 生成 网 站 实例 ,如 图 8. 1 所 示 。 


CCCES 技 术 有 限 公 司 简介 


8.1 利用 模板 生成 的 网 站 效果 图 


《2 [ 网 站 规划 St] 


本 网 站 实例 主要 涉及 以 下 知识 点 。 

(1) 网 页 版 面 布局 的 设计 。 

(2) 划分 模板 锁定 区 域 和 可 编辑 区 域 。 

(3) 创建 模板 和 编辑 模板 ,最 后 根据 模板 快速 创建 网 页 。 


8.2 创建 和 编辑 模板 


模板 最 显著 的 特征 就 是 存在 锁定 区 域 和 可 编辑 区 域 之 分 。 锁 定 区 域 主要 用 来 锁定 体 
现 网 站 风格 的 部 分 ,而 将 经 常 要 改变 的 文字 .图像 .链接 等 网 页 元 素 设置 在 可 编辑 区 域 , 网 
页 中 只 编辑 可 编辑 区 域 的 内 容 ,从 而 得 到 与 模板 相似 ,但 又 有 所 不 同 的 新 的 网 页 。 


8.2.1 创建 模板 
创建 模板 有 两 种 常用 的 方法 : 一 是 创建 新 模板 ;二 是 将 当前 网 页 另存 为 模板 。 
1. 创建 新 模板 


方法 一 ”选择 "文件 菜单“ 新建" 命 令 , 弹 出“ 新建 文档 ”对话 框 ,选择 “空白 页 "选项 
卡 一 “HTML 模板 ?选项 一 “布局 ”中 的 某 项 , 单 击 “创建 ?按钮 ,创建 一 个 新 模板 ,如 图 8. 2 


所 示 。 
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图 8.2 “新 建文 档 " 对 话 框 


方法 二 ”选择 “窗口 "菜单 一 “资源 ”命令 ,打开 “资源 ”面板 , 单 击 “资源 ”面板 左边 的 
“模板 ”按钮 ,再 单 击 右 下 角 的 “新 建 模板 ”按钮 狂 .如 图 8. 3 所 示 。 


2. 将 当前 网 页 另存 为 模板 
将 一 个 编辑 好 的 网 页 按照 要 求 加 以 修改 ,然后 另存 为 模板 。 操 作 步 又 如 下 。 


(1) 保留 与 其 他 网 页 相同 的 结构 和 相同 的 网 页 
内 容 , 删 除 不 需要 与 其 他 网 页 共享 的 内 容 , 插 入 “可 
(2) 选择 "文件 ?菜单 ~ 另存 为 模板 ”命令 ,或 者 
单 击 “ 插 入 " 栏 一 “常用 ”按钮 组 “模板 ”按钮 组 一 
“创建 模板 ”按钮 ,如 图 8.4 所 示 , 弹 出 如 图 8. 5 所 示 


“另存 模板 "对话 框 ,在 此 输入 模板 名 称 , 单 击 * 保 存 ” Se 
按钮 。 图 8.3 利用 “资源 "面板 创建 模板 
到 


站 点 -| 未 命名 站 点 4 5 


现存 的 模板 | 取消 


Sit[ 


Si 为 EGG 帮助 


图 8.4 利用 “插入 " 栏 保存 模板 图 8.5 “另存 模板 "对话 框 


8.2.2 ”编辑 模板 


首先 划分 可 编辑 区 域 和 锁定 区 域 , 然 后 编辑 模板 。 通 常 , 像 编 辑 网 页 一 样 先 将 锁定 区 
域 编辑 好 ,然后 再 定义 可 编辑 区 域 ,如 图 8. 6 所 示 。 


联系 我 人 ;1 


可 编辑 区 域 


图 8.6 编辑 模板 


在 模板 中 可 编辑 区 域 对 应 网 页 中 的 可 编辑 部 分 ,锁定 区 域 是 那些 不 可 编辑 的 部 分 。 
在 默认 的 方式 下 ,Dreamweaver 将 新 模板 的 所 有 部 分 设置 为 不 可 编辑 区 域 ,由 用 户 来 定 
义 可 编辑 区 域 。 在 编辑 模板 时 ,实际 上 无 论 是 可 编辑 区 域 还 是 锁定 区 域 都 是 可 以 编辑 的 。 
但 是 将 模板 应 用 到 网 页 中 后 ,在 网 页 中 的 锁定 区 域 是 不 可 以 编辑 的 。 

常用 的 定义 可 编辑 区 域 的 方法 有 两 种 。 
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方法 一 ”在 模板 中 将 光标 定位 在 要 新 建 可 编辑 区 域 位 置 , 选 择 “ 择 入 ”菜单 一 “模板 对 


象 "~“ 可 编辑 区 域 "命令 。 pe 
方法 二 单 击 “ 插 入 ” 栏 一“ 常用 ”按钮 组 一 
“模板 ”选项 一 “可 编辑 区 域 ” 按 钮 。 Ee 


弹出 “新 建 可 编辑 区 域 "对 话 框 ,如 图 8.7 所 | 鳃 有 
示 , 在 此 输入 可 编辑 区 域 的 名 称 , 单 击 “ 确 定 ” 按 
钮 , 即 新 建 了 可 编辑 区 域 。 

Dreamweaver 会 将 这 个 区 域 用 高 亮 边框 的 
和 矩形 包围 起 来 ,同时 在 矩形 的 左上 角 显 示 这 个 可 
编辑 区 域 的 名 称 , 如 图 8. 6 所 示 。 创 建 模板 后 ,本 地 站 点 会 自动 创建 一 个 文件 夹 
templates ,模板 的 默认 路 径 就 是 此 文件 夹 ,模板 的 扩展 名 为 dwt。 


图 8.7 “新 建 可 编辑 区 域 " 对 话 框 


8.3 应 用 和 更 新 模板 
在 网 站 建设 中 ,可 以 为 网 站 设计 几 套 不 同 的 模板 ,为 网 站 的 风格 提供 不 同 的 方案 , 同 
时 可 不 定期 地 快速 改变 网 站 的 风格 ,提高 网 站 的 吸引 力 。 
8.3.1 应 用 模板 
利用 模板 快速 生成 新 的 网 页 ,也 可 以 将 模板 应 用 于 已 经 存在 的 网 页 。 
1. 模板 的 应 用 


选择 “文件 "菜单 一 “新建 "命令 ,弹出 “新 建文 档 ” 对 话 框 ,选择 “模板 中 的 页 ”选项 卡 , 选 
择 “ 站 点 "列表 框 中 站 点 名 称 ,再 单 击 其 右 侧 的 “站 点 ‘WWW 的 模板 ”文件 ,选中 “ 当 模 板 改 
变 时 更 新 页 面 " 复 选 框 ,然后 单 击 “ 创 建 "按钮 ,如 图 8. 8 所 示 , 实 现 通 过 模板 快速 创建 网 页 。 


ps 


图 8.8 从 模板 中 新 建 页 


2. 将 模板 应 用 于 当前 网 页 


方法 一 ”选择 “窗口 "菜单 >“ 资源 ”命令 ,打开 “资源 ”面板 ,在 “资源 ”面板 中 选中 要 插 
入 的 模板 , 单 击 “ 应 用 ”按钮 ,或 直接 拖 动 模板 到 页 面 中 ,如 图 8.9 所 示 。 

方法 二 选择 “修改 ?菜单 “模板 ”套用 模板 到 页 命令。 

如 果 模 板 与 当前 文档 出 现 不 匹配 的 情况 .将 弹出 “不 一 致 的 区 域名 称 ” 对 话 框 ,如 
图 8. 10 所 示 , 选 中 可 编辑 区 域名 称 , 在 “将 内 容 移 到 新 区 域 " 下 拉 列 表 中 ,设置 移动 或 丢弃 


的 不 匹配 区 域 。 
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图 8.9 在 “资源 ”面板 中 选择 应 用 模板 图 8.10 解析 不 匹配 区 域 


3. 当前 网 页 不 再 使 用 模板 


当 不 再 需要 对 一 个 网 页 使 用 模板 时 ,选择 “修改 "菜单 一 “模板 ”一 “从 模板 中 分 离 ” 命 
令 , 将 网 页 和 与 之 关联 的 模板 文件 脱离 。 脱 离 之 后 的 网 页 将 变 成 普通 网 页 ,不 再 有 可 编辑 
区 域 和 锁定 区 域 之 分 。 


8.3.2 更 新 模板 


1. 修改 模板 


创建 模板 后 ,用 户 利用 模板 生成 了 网 页 文件 。 在 网 页 文件 的 编辑 过 程 中 可 能 会 有 一 
些 不 合适 的 地 方 , 比 如 链接 有 错误 、 网 页 布局 中 单元 格 对 齐 方式 不 合理 .图 像 不 能 正常 显 
示 等 。 而 在 网 页 编辑 状态 是 无 法 对 锁定 区 域 进行 修改 的 ,因此 需要 在 模板 中 进行 修改 。 

打开 模板 文件 ,针对 在 网 页 编辑 中 发 现 的 问题 对 模板 文件 进行 修改 。 

(1) 修改 模板 : 对 锁定 区 域 进行 修改 。 

(2) 删除 多 余 的 可 编辑 区 域 : 在 模板 编辑 状态 .选中 已 定义 的 可 编辑 区 域 , 选 择 “ 修 
改 ” 菜 单一 “模板 ”>“ 删 除 模 板 标 记 ” 命 令 ,该 可 编辑 区 域 就 不 存在 了 。 
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2. 用 模板 更 新 网 页 和 网 站 


一 旦 模板 被 应 用 到 多 个 网 页 文档 中 ,对 此 模板 的 修改 则 会 更 新 到 全 部 与 其 相关 联 的 
文档 中 。 这 种 使 用 模板 更 新 文件 的 方法 大 大 节省 了 用 户 的 时 间 , 尤 其 当 涉及 大 量 的 改动 
时 极为 有 效 。 

1) 用 模板 更 新 整个 网 站 和 所 有 与 之 关联 的 网 页 

当 修改 了 模板 后 , 当 用 户 保 存 模板 时 ,Dreamweaver 会 提示 用 户 是 否 使 用 模板 更 新 
网 站 ,或 选择 “修改 "菜单 一 “模板 "一 “更 新 页 面 "命令 。 此 时 将 弹出 “更 新 模板 文件 ”对 话 
框 ,如 图 8. 11 所 示 。 单 击 “ 更 新 "按钮 ,弹出 “更 新 页 面 " 对 话 框 ,如 图 8. 12 所 示 ,选择 “ 查 
看 ”下 拉 列 表 中 “整个 站 点 ”选项 ,并 在 右 侧 的 下 拉 列 表 中 选择 网 站 名 称 ,“ 更 新 ”选项 组 选 
择 “ 模 板 ” 复 选 框 , 单 击 “ 开 始 ” 按 钮 , 则 对 整个 网 站 进行 更 新 。 


要 基于 此 模板 更 新 所 有 文件 吗 ? 
a 


Im 
huaojiang htm 


zjps. htm 


图 8.11 “更 新 模板 文件 "对话 框 图 8.12 “更 新 页 面 " 对 话 框 


2) 用 模板 更 新 一 个 单独 的 网 页 
打开 要 更 新 的 网 页 ,选择 “修改 "菜单 一“ 模板 ”>“ 更 新 当前 页 ”命令 即 可 。 


8.4 使 用 库 


Dreamweaver 中 提供 了 库 的 概念 。 库 是 用 来 存储 想 要 在 整个 网 站 上 经 常 重复 使 用 
或 更 新 的 网 页 元 素 , 其 他 网 页 可 调用 库 文 件 。 这 样 一 旦 需要 修改 重复 使 用 的 部 分 ,只 需要 
修改 库 文件 ,而 其 他 调用 此 库 的 页 面 将 会 被 全 部 更 新 。 


8.4.1 创建 库 


库 项 目 可 以 包含 多 种 网 页 元 素 ,如 图 像 、 链 接 、 表 格 、 脚 本 等 ,但 CSS 文件 不 能 作为 库 
项 目的 内 容 。 

创建 库 的 常用 方法 有 三 种 。 

方法 一 ”选择 “文件 "菜单 >“ 新建 "命令 ,弹出 “新 建文 档 ” 对 话 框 ,打开 “空白 页 ”选项 
卡 , 在 “页 面 类 型 "列表 中 选择 “ 库 项 目 ”, 单 击 “ 创 建 " 按 钮 ,如 图 8. 13 所 示 。 

方法 二 ”选择 “窗口 "菜单 一 “资源 ”命令 ,打开 “资源 ”面板 ,选择 “ 库 ” 按 钮 池 , 单 击 
“资源 ”面板 下 方 的 “新 建 库 项 目 ” 按 钮 ,如 图 8. 14 所 示 。 

方法 三 ”将 已 经 编辑 好 的 网 页 元 素 转换 为 库 项 目 。 首 先 选 中 要 转换 为 库 项 目的 网 页 


/OA OC 汪 的 和 第 6 章 “模板 与 库 的 心 用 ] < 


布局 


Ireaavesver 庄 而 目 立 档 


部 助 0 | 前 才思 EL EL 了 消 包 
图 8.13 选择 * 库 项 目 " 创 建 库 


元 素 ,然后 选择 “修改 ”菜单 一 “ 库 ” 一 “增加 对 象 到 库 ” 命 令 , 当 前 选中 的 网 页 元 素 就 会 成 为 
一 个 新 的 库 项 目 以 供 其 他 网 页 调用 。 
创建 库 项 目 后 ,站 点 中 就 会 多 出 子 文件 夹 library, 库 项 目的 默认 存储 路 径 就 是 该 文 
件 夹 。 库 项 目的 后 级 名 为 lbi。 如 图 8. 15 所 示 , 在 本 实例 中 ,将 网 页 中 经 常 更 换 的 新 闻 图 
片 设置 为 库 项 目 。 库 项 目的 编辑 与 普通 网 页 的 编辑 完全 相同 。 


ae | EEC 


和 村 /有 页 座 过 林 甩 /月 开征 但 


IEIDeg 误 加 多 四 加 


图 8.14 在 “资源 ”面板 中 新 建 库 项 目 图 8.15 编辑 库 文件 


8.4.2 应 用 库 


库 建 立 好 后 ,可 以 很 轻松 地 将 库 应 用 于 网 页 文件 中 。 操 作 步 骤 如 下 。 

(1) 打开 模板 或 网 页 ,把 光标 定位 在 需要 插入 库 的 位 置 。 

(2) 在 “资源 ”面板 中 单 击 “ 库 ”按钮 ,然后 选择 相应 的 库 项 目 , 单 击 “ 插 入 ”按钮 ,或 者 
将 库 项 目 直接 拖 到 网 页 需要 插入 库 的 位 置 。 
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将 库 项 目 应 用 到 模板 或 网 页 文件 中 后 ,在 Dreamweaver 的 网 页 编辑 状态 ,可 看 到 库 
项 目的 背景 呈现 高 亮度 显示 。 


8.4.3 修改 库 


库 被 应 用 到 模板 或 网 页 文档 中 ,在 模板 或 网 页 中 是 无 法 修改 库 的 。 要 修改 库 , 必 须 首 
先 打开 库 项 目 才能 进行 编辑 。 对 库 的 修改 则 会 自动 更 新 所 有 与 之 关联 的 网 页 文档 。 


1. 编辑 库 


打开 “资源 ”面板 , 单 击 “ 库 ”按钮 ,双击 某 个 库 项 目 ,进入 库 项 目的 编辑 状态 ,对 库 项 目 
进行 修改 。 

库 项 目 修改 完毕 ,保存 库 文件 时 ,弹出 “更 新 库 项 目 ” 对 话 框 ,如 图 8. 16 所 示 。 单 击 
“更 新 "按钮 ,或 选择 “修改 "菜单 一 “ 库 ” 一 “更 新 页 面 "命令 ,弹出 “更 新 页 面 " 对 话 框 , 如 
图 8. 17 所 示 , 可 进行 如 下 两 种 设置 。 


更 新 这 些 文件 的 库 项 目 吗 ? Cv 
ht 
Moojitne hte 不 更 新 名 


jianjie htm 
zjps. htm 


Tenplates\O1, dwt 
Tenplates\moban. dwt 


图 8.16 更 新 整个 站 点 中 调用 库 项 目的 网 页 


TE -x 


查看 0): [总 个 站 点 ”二 | [soban -| 
更 新 厅 库 顺 上 由 no | 


厂 模板 如 ) 帮助 | 
厂 显示 记录 00 | 
状态 : 


图 8.17 “更 新 页 面 " 对 话 框 


1) 更 新 本 地 站 点 上 所 有 调用 过 库 项 目的 文档 

选择 “查看 ”下 拉 列 表 中 的 “整个 站 点 ”, 并 在 右 侧 的 下 拉 列 表 中 选择 网 站 名 称 , 单 击 
“开始 ”按钮 , 则 对 整个 网 站 进行 更 新 ,如 图 8. 17 所 示 。 

2) 仅 更 新 当前 正在 编辑 的 网 页 

选择 “查看 "下拉 列表 中 的 “文件 使 用 …”, 单 击 “ 开 始 ” 按 钮 ,或 选择 “修改 ”菜单 一“ 库 ” 一 
“更 新 当前 页 ”命令 , 即 完 成 仅 更 新 当前 网 页 ,如 图 8. 18 所 示 。 


2. 删除 库 
打开 “资源 ”面板 , 单 击 “ 库 ”按钮 ,选择 库 项 目 , 按 下 Del 键 即 可 删除 选中 的 库 项 目 。 
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图 8.18 更 新 当前 页 


删除 库 后 ,不 会 改变 任何 调用 此 库 的 其 他 模板 或 网 页 内 容 。 
3. 使 模板 或 网 页 中 库 项 目 可 编辑 


如 果 网 页 中 添加 了 库 项 目 , 则 库 项 目 以 高 亮 显示 ,无 法 编辑 。 如 果 要 在 网 页 中 编辑 库 
项 目 所 包含 的 内 容 , 则 必须 断 开 当 前 网 页 与 库 之 间 的 关联 。 操 作 步骤 如 下 。 

在 当前 网 页 中 选中 库 项 目 , 在 “属性 ?面板 中 单 击 “ 从 源 文件 中 分 离 " 按 钮 ,如 图 8. 19 
所 示 。 此 时 库 项 目 不 再 以 高 亮 显示 ,并且 原始 的 库 项 目 即 使 有 更 改 , 它 也 不 会 再 更 新 。 


属性 
| 库 项 目 Sre /Library/pic. lbi 打开 ] [从 源 文 件 中 分 高 
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图 8.19 将 网 页 中 调用 的 库 项 目 与 库 分 离 


8.5 ”利用 模板 和 库 制作 商务 网 站 


本 节 讲解 例 8. 1 所 举 利用 模板 和 库 快速 创建 一 个 网 站 的 实例 。 制 作 过 程 如 下 。 

(1) 创建 一 个 本 地 站 点 www, 在 站 点 内 新 建 一 个 文件 夹 images, 用 于 存储 图 像素 材 。 

(2) 选择 “文件 "菜单 一 “新 建 " 命 令 , 在 “新 建文 档 " 对 话 框 中 ,选择 “空白 页 ”选项 卡 一 
“HTML 模板 ”>“ 无 ”选项 , 单 击 “ 创 建 "按钮 。 

(3) 编辑 模板 页 面 ,编辑 的 方法 与 普通 网 页 无 异 。 采 用 CSS 十 Div 进行 页 面 布局 ,页 
面 布局 的 宽度 为 1000 像素 。 

(4) 插入 一 个 总 的 Div, 命 名 为 all ,宽度 设置 为 1000 像素 ;在 其 中 插入 多 个 Div, 一 是 
名 为 al 的 Div, 背 景 为 蓝 绿色 ,输入 文本 和 公司 英文 名 称 ; 二 是 名 为 a2 的 Div, 背 景 为 白 
色 , 在 其 中 插入 “公司 标志 和 名 称 ” 的 图 像 , 以 及 用 作 导 航 的 文本 等 网 页 元 素 ;三 是 插入 名 
为 a3 的 Div, 背 景 为 蓝 绿色 ,输入 一 段 文本 ;四 是 插入 名 为 a4 的 Div, 并 设置 背景 图 像 , 以 
上 al、a2、a3、a4 宽度 均 为 1000 像素 。 

(5) 将 光标 置 于 名 为 a4 的 Div 中 ,选择 “插入 ”菜单 一 “模板 对 象 >“ 可 编辑 区 域 " 命 
令 , 弹 出 “新 建 可 编辑 区 域 ” 对 话 框 ,输入 可 编辑 区 域 的 名 称 . 单 击 “ 确 定 ” 按 钮 。 最 后 命名 
并 保存 模板 ,模板 名 称 为 01. dwt。 

(6) 利用 模板 快速 生成 网 页 。 选 择 “ 文 件 ”" 菜 单一 “新 建 " 命 令 , 在 “新 建文 档 ” 对 话 框 
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中 ,选择 “模板 中 的 页 ?选项 卡 ,选择 站 点 名 称 , 和 模板 名 称 , 选 中 * 当 模板 改变 时 更 新 页 面 
复 选 框 , 单 击 * 创 建 ”按钮 。 
(7) 对 可 编辑 区 域 进行 编辑 ,输入 文本 插入 图 像 等 ,然后 保存 网 页 ,如 图 8. 20 所 示 。 


图 8.20 利用 模板 编辑 的 网 页 


(8) 预览 网 页 ,分 析 网 页 中 存在 的 问题 ,然后 修改 模板 ,例如 ,网 页 布局 .美化 网 页 ,更 
正 网 页 的 链接 等 。 接 下 来 添加 Div 的 背景 图 像 ,添加 导航 文本 的 超 链接 ,在 最 下 方 添加 名 
为 down 的 Div, 插 入 公司 的 名 称 和 地 址 等 。 

(9) 在 多 个 页 面 中 要 添加 同一 个 公司 新 闻 图 片 ,此 新 闻 图 片 会 经 常 变 动 ,最 好 的 办 法 
是 将 此 部 分 内 容 创 建 为 一 个 库 项 目 。 打 开 “ 资 源 ” 面 板 , 单 击 “ 库 ”按钮 , 单 击 “ 资 源 ” 面 板 下 
方 的 “新 建 库 项 目 ” 按 钮 ,命名 库 项 目 。 双 击 库 名 称 ,进入 库 的 可 编辑 状态 ,插入 一 幅 图 像 
后 保存 库 项 目 。 

(10) 将 库 项 目 与 模板 相 结 合 应 用 到 网 页 中 。 在 网 页 中 综合 应 用 模板 和 库 将 大 大 减 
少 网 站 设计 中 重复 的 工作 量 。 打 开 模 板 , 将 光标 定位 于 名 为 a3 的 Div 的 文本 下 方 ,打开 
“资源 ”面板 , 单 击 “ 库 ”按钮 , 单 击 库 项 目 , 将 其 拖 动 到 页 面 的 最 下 方 。 此 时 库 就 应 用 于 模 
板 了 ,如 图 8.21 所 示 。 

(11) 保存 模板 时 ,Dreamweaver 会 提示 用 户 是 否 更 新 模板 文件 ,弹出 “更 新 模板 页 
面 " 对 话 框 , 单 击 “ 更 新 "按钮 ,继而 弹出 “更 新 页 面 " 对 话 框 ,选择 更 新 整个 站 点 , 单 击 “ 开 
始 ? 按 钮 完成 更 新 。 

同 理 , 利 用 模板 创建 站 点 中 的 其 他 页 面 。 
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图 8.21 将 库 添加 到 模板 中 


本 章 小 结 


本 章 通 过 网 站 实例 的 讲解 ,重点 介绍 了 以 下 几 点 。 

(1) 模板 和 库 的 基本 概念 及 功能 特点 。 

(2) 模板 的 编辑 : 如 何 创建 模板 、 编 辑 模板 ,修改 模 板 , 利 用 模板 快速 创建 网 页 。 

(3) 库 的 编辑 : 如 何 创建 库 、 编 辑 库 ,为 网 页 添加 库 。 

(4) 如 何 将 模板 与 库 应 用 于 网 页 ,快捷 生成 风格 一 致 的 多 个 网 页 , 且 便 于 网 站 的 后 期 
维护 。 


练 习 题 


(1) 什么 是 模板 ? 在 Dreamweaver 中 如 何 使 用 模板 ? 
(2) 如 何 将 库 项 目 从 源 文件 中 分 离 ? 
(3) 模板 和 库 的 区 别 是 什么 ? 


由 


上 机 实验 


1. 实验 要 求 

1) 利用 模板 创建 站 点 

要 求 : 根据 给 定 的 网 页 素材 ,结合 网 页 草图 ,创建 和 编辑 模板 ,并 利用 模板 快速 生成 
相同 风格 、 相 似 结构 的 网 站 。 
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2) 在 网 页 中 添加 库 项 目 

要 求 : 在 实验 要 求 1) 的 基础 上 ,结合 库 项 目的 独特 优势 ,将 多 个 网 页 中 重复 使 用 的 网 
页 元 素 存储 为 一 个 文件 , 即 为 库 项 目 ,然后 在 其 他 需要 调用 的 网 页 或 模板 中 调用 库 , 从 而 
达到 提高 网 页 设计 的 效率 。 网 页 如 图 8. 22 所 示 。 


区 司 某 某 集 团 。 集团 首页 集团 介 绍 。 蓝海 文化 新闻 中 心 。 产品 介绍 。 人 力 资源 。 联系 我 们 
re 


海 是 最 蓝 的 情 是 最 真 的 
[| SA 
要 括 200? 年 6 月 1 日 ， 某 某 酒 店 集 团 400 客 户 服务 中 心 于 6 月 19 日 起 汪 运 行 ， 其 目的 在 
. 瑟 二 户 机 诉 过 服务 和 汉 油 服务 ， 地 的 了 立 标 志春 和 团 的 搞 化 
3207 来 39 上 革 村 村 村 大 让 正 式 开山 。 这 是 和 管 ， 信 认 、 会 BO 
可 编辑 _| 企业 大 事 记 体 的 四 里 级 商务 美食 酒店 ， 建 筑 面 积 1.4 万 平方 米 ， 建 设 规模 大 ， ER |_ 可 编辑 
区 域 | 一 满足 商务 、 政 务 等 各 类 客户 的 需求 一 区 域 
蓝海 文化 ,2001 年 5 月 6 日， 对 革 三 里 级 酒店 项 目 答 约 仪式 在 某 某国 际 大 怕 店 举行 ， 这 是 我 
集团 与 革 肝 革 革 集团 有 限 公司 的 合作 项 目 
产品 介绍 2 和 5 朋 日。 基 革 革 上 和 团 为 汪 系 入” 天 = 万 
由 | 世相 人 名 织 ， 基 实在 于 “ 拓 手 林 得， 共和 谨 


，2007 年 2 月 ， 我 第 团 总 科 某 某 革 先生 被 评 为 “2006 年 度 - 和 
2007 年 2 月 ， 山 东 革 革 酒 店 集 团 振 名 CMe era PE 第 一 名 ， 并 位 居 
负 床 省 稳 饮 十 大 品牌 企业 ”之 首 。 


eb 


地址 : 中 国 其 其 省 莫 基 币 黄 河 路 与 六 山路 交汇 处 TEL 


«WAX:0546-00000000 


图 8.22 利用 模板 和 库 生 成 的 网 页 


2. 背景 知识 


根据 本 章 所 学 的 模板 和 库 的 知识 ,并 结合 前 面 所 学 的 网 页 编辑 、 网 页 排版 技术 ,进行 
网 站 设计 与 制作 。 


3. 实验 准备 工作 

将 网 站 的 页 面 草 图 和 网 站 的 素材 资料 准备 好 ,发 送 到 学 生 主机 ,以 供 学 生 参 考 使 用 。 
4. 课时 安排 

上 机 实验 课时 安排 2 课时 。 

5. 实验 指导 


1) 利用 模板 创建 站 点 

(1) 首先 根据 草图 进行 网 站 结构 分 析 。 本 网 站 多 个 网 页 的 风格 是 保持 一 致 的 ,网 页 
最 上 方 是 一 个 公司 的 标志 (logo), 右 侧 是 横 排 的 导航 条 ;第 二 行 是 一 个 企业 的 广告 横幅 ; 
第 三 行 左 侧 是 一 个 快速 链接 栏 (设置 为 可 编辑 区 域 ) , 右 侧 是 每 一 个 网 页 的 主体 内 容 ( 设 置 
为 可 编辑 区 域 ) ;最 下 方 一 栏 有 企业 标志 和 公司 地 址 信息 。 

(2) 打开 “资源 ”面板 , 单 击 “ 模 板 ” 按 钮 ,再 单 击 “ 创 建 模板 ”按钮 并 命名 模板 。 双 击 模 


板 名 称 , 进 入 模板 可 编辑 状态 。 模 板 的 编辑 方法 与 网 页 完全 相同 ,采用 表格 或 CSS 十 Div 
排版 技术 建立 模板 结构 。 在 第 三 行 左 侧 快速 链接 栏 处 . 右 侧 网 页 主体 内 容 处 插入 两 个 可 
编辑 区 域 ,可 编辑 区 域内 为 空白 ,不 输入 内 容 。 

(3) 根据 模板 创建 网 页 ,编辑 右 侧 的 可 编辑 区 域 ,输入 “集团 概括 ”的 相关 信息 并 插入 
图 像 , 将 网 页 保存 为 about. htm, 保 存 路 径 为 根 文件 夹 下 。 

(4) 同 理 ,建立 男 外 几 个 页 面 ,分 别 为 总 裁 致 秤 ,企业 大 事 记 , 将 它们 保存 为 about01. 
htm 和 about02. htm。 

2) 在 网 页 中 添加 库 项 目 

(1) 浏览 和 检查 网 页 时 发 现 , 实 验 要 求 1) 根 据 模板 制作 出 的 网 页 是 不 完善 的 , 左 侧 的 
快速 链接 没有 内 容 , 可 由 库 来 完成 。 

(2) 新 建 库 项 目 , 对 其 进行 编辑 。 单 击 “ 属 性 ”面板 中 “页 面 属性 ”按钮 ,打开 “页 面 属 
性 ?对 话 框 ,设置 页 边 距 均 为 0。 插 入 一 个 6 行 1 列表 格 , 宽 度 为 100%。 在 每 个 单元 格 中 
各 输入 一 段 文本 分 别 为 : 快速 链接 .集团 概括 .总 裁 致辞 .企业 大 事 记 、 蓝 海 文化 .产品 介 
绍 。 第 一 个 单元 格 的 背景 颜色 为 #006633, 其 余 单元 格 设置 一 个 背景 图 像 为 news_list_ 
bg3. gif, 保 存 库 项 目 为 bt. lbi。 

(3) 应 用 库 项 目 。 打 开 实 验 要 求 1) 所 建立 的 模板 ,将 光标 置 于 左 侧 单元 格 可 编辑 区 
域 中 。 打 开 “ 资 源 ” 面 板 单 击 “ 库 ”按钮 ,选中 bt. lbi, 单 击 “ 插 入 ”按钮 ,将 库 应 用 于 模板 中 。 

(4) 保存 该 模板 ,此 时 会 有 一 个 更 新 提示 , 单 击 “更 新 ”按钮 ,又 会 出 现 一 个 更 新 页 面 
的 对 话 框 , 确 认 更 新 完成 ,关闭 对 话 框 。 
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本 章 将 主要 介绍 如 何 为 网 页 设置 背景 音乐 ,在 网 页 中 插入 Flash 动画 、Flash 视频 以 
及 其 他 类 型 的 视频 和 音频 文件 ,制作 出 多 媒体 站 点 。 


【本 章 学 习 目 标 】 


。 了解 多 媒体 技术 在 网 页 中 的 用 途 ; 

。 掌握 设置 网 页 背景 音乐 的 方法 ; 

。 掌握 在 网 页 中 添加 Flash 动画 、Flash 视频 的 方法 ; 
。 掌握 在 网 页 中 添加 视频 和 音频 文件 的 方法 ; 

。 学 会 制作 多 媒体 站 点 的 技能 。 


9.1 实例 导入 : 多 媒体 站 点 


在 网 页 中 应 用 多 媒体 对 象 可 以 增强 网 页 的 娱乐 性 和 感染 力 , 多 媒体 已 成 为 最 有 魅力 
的 表现 方式 ,也 是 潮流 的 方向 。 
【 例 9.1】 图 9. 1 所 示 为 “娱乐 在 线 ” 多 媒体 站 点 。 


EE 


图 9.1 “娱乐 在 线 " 网 站 首页 


该 多 媒体 站 点 主要 实现 的 功能 是 在 线 观 看 Flash 动画 、Flash 视频 以 及 其 他 类 型 的 视 
频 及 音频 文件 。 

在 本 网 站 实例 中 ,主要 涉及 以 下 知识 点 。 

(1) 背景 音乐 的 设置 。 

(2) 插入 Flash 对 象 , 包 括 Flash 动画 、Flash 视频 等 。 

(3) 插入 其 他 类 型 视频 和 音频 文件 。 


9.2 使 用 多 媒体 对 象 


网 页 中 常用 的 多 媒体 对 象 主要 分 为 Flash 类 (包括 Flash 动画 、Flash 视频 等 ) Java 
Applet、ActiveX 控件 类 ,以 及 各 种 音频 、 视 频 文件 (如 Shockwave 影片 RMVB、WMV、 
MP3 文件 等 ) 。 


9.2.1 设置 页 面 背景 音乐 


由 于 背景 音乐 不 是 一 种 标准 的 网 页 属性 ,所 以 需要 用 修改 源 代 码 的 方式 为 网 页 添加 
背景 音乐 。 操 作 步 又 如 下 。 

(1) 打开 要 添加 背景 音乐 的 网 页 ,切换 到 代码 视图 或 拆 分 视图 。 

(2) 在 二 head 之 和 所 /head 标签 之 间 添 加 背景 音乐 的 代码 格式 如 下 。 

<bgsound src= "背景 音乐 的 URL 地 址 " loop= "n"> 


本 实例 添加 的 代码 如 图 9.2 所 示 。 


DW SH® wu wa mAD WM ro 


besound src="yinping/123. np3” loop="-1"> 


《title> 娱 乐 在 线 快乐 无 根 限 </title> 


Cstyle type="text/css"> 


图 9.2 设置 背景 音乐 


在 bgsound 标签 中 ,src 用 于 指定 背景 音乐 的 源 文件 路 径 。loop 是 指 背景 音乐 的 循 
次 数 ,如 果 输 入 为 一 1, 则 表示 无 限 循环 。bgsound 标签 中 所 支持 的 背景 音乐 格式 为 
wav、mid、mp3 等 。 
保存 网 页 , 按 下 快捷 键 F12 在 浏览 器 中 浏览 网 页 ,倾听 背景 音乐 的 播放 效果 。 


9.2.2 插入 Flash 动画 
Flash 动画 是 一 种 高 质量 高 压缩 率 的 矢量 文件 ,有 超 强 的 交互 能 力 , 也 正 是 因为 这 
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些 原因 ,Flash 在 网 络 上 得 到 了 快速 发 展 。 
1. 插入 Flash 动画 


Flash 源 文 件 格式 为 fla, 源 文件 不 能 直接 插入 到 
网 页 中 ,可 以 在 Flash 软件 中 修改 源 文件 。 插 入 网 页 
中 的 Flash 动画 格式 应 为 swf。 

插入 Flash 动画 常用 的 方法 有 两 种 。 

方法 一 单 击 “ 插 入 ” 栏 一 “常用 ”按钮 组 一 “ 媒 
体 ” 按 钮 组 一 SWF 按钮 ,如 图 9. 3 所 示 。 

方法 二 ”选择 “插入 "菜单 “媒体 ”一 “SWF" 命 
令 , 如 图 9.4 所 示 。 

插入 Flash 动画 后 ,在 文档 窗口 中 出 现 Flash 占 位 符 , 如 图 9.5 所 示 。 


图 9.3 利用 “插入 " 栏 插入 SWF 动画 


世 汪 二 | 从 改 (M) 格式 (0) 命令 (Q。 站 点 ($) 窗口 (W) 帮助 (H) 
CtrltE 


CtrltALttA 


图 9.4 利用 "插入 "菜单 插入 SWF 动画 图 9.5 Flash 占 位 符 


2. 设置 Flash 动画 的 属性 
单 击 Flash 占 位 符 , 选 中 Flash 动画 ,在 “属性 ?面板 中 设置 其 属性 ,如 图 9. 6 所 示 。 


文件 加 avlivenses sf DO Re 6) 
[EE 


避 质 网 [高 品质 OU 本 
比 网 5) 议 玉 三 ”二 aode00 | 不过 机” 芝 


图 9.6 设置 Flash 动画 的 属性 


Flash 各 项 属性 的 功能 如 下 。 

(1) FlashID: 定义 Flash 名 称 。 

(2) 宽 和 高 : 设置 Flash 的 尺寸 。 

(3) 文件 : Flash 动画 文件 路 径 。 

(4) 编辑 : 单 击 “编辑 按钮 ,直接 进入 Flash 软件 进行 编辑 ,可 以 不 设置 。 
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(5) 垂直 边 距 与 水 平 边 距 : 与 周围 网 页 元 素 的 间隔 。 

(6) 选中 “循环 " 复 选 框 ,动画 将 连续 播放 ,否则 动画 播放 一 次 后 自动 停止 。 选 中 “ 自 
动 播放 ” 复 选 框 设 定 Flash 文件 是 否 在 页 面 加 载 时 就 播放 。 

(7) 品质 : 选择 Flash 动画 的 品质 ,如 要 以 最 佳 状态 显示 ,就 选择 “高 品质 ”。 

(8) 对 齐 : 设置 Flash 动画 的 对 齐 方式 。 

(9) 背景 颜色 : 设置 Flash 背景 颜色 与 页 面 背 景 匹配 。 

(10) Wmode: 为 了 使 页 面 的 背景 在 Flash 下 能 够 衬托 出 来 ,设置 参数 去 除 Flash 动 
面 背景 。 单 击 “Wmode” 下 拉 列 表 , 选 择 “ 不 透明 ”。 

(11) 播放 与 停止 : 单 击 “ 播 放 ” 按 钮 可 预览 Flash 动画 , 单 击 “ 停 止 " 按 钮 ,停止 播放 
Flash 动画 。 


9.2.3 插入 Flash 视频 


Flash 视频 即 Flash Video, 它 的 扩展 名 为 flv, 是 目前 广泛 流行 的 一 种 视频 文件 格式 。 
一 般 的 视频 文件 ASF、WMV、RMVB 等 都 需要 专门 的 播放 器 来 支持 视频 文件 的 播放 , 否 
则 根本 无 法 收看 ,并且 这 类 文件 容量 过 大 ,下 载 需要 的 时 间 长 ,查看 也 不 够 流畅 。 为 了 解 
决 播放 器 和 容量 的 问题 ,可 以 将 各 类 视频 文件 转换 成 Flash 视频 文件 , 即 flv 格式 ,经 过 编 
码 后 的 音频 和 视频 数据 ,通过 Flash Player 传送 。 操 作 步 骤 如 下 。 

单 击 “ 插 入 " 栏 一 常用 "按钮 组 "媒体 "按钮 组 一 “FLV? 按 钮 ,或 选择 “插入 "菜单 一 
“媒体 ?选项 -~~FLV 按钮 ,弹出 “插入 FLV” 对 话 框 ,如 图 9.7 所 示 。 设 置 Flash Video 的 


相关 参数 。 
加 
视频 类 型 :| 累 进 式 下 载 视频 S| 确定 | 
a mw | 
UREFvitar AR 都 助 | 
《输入 FLV 文件 的 相对 或 绝对 路 径 ) 
如 观 :clear Skin ! (最 小 宽度 : 140) z 
| pl 只 | 


宽度 :fo0 ”。” 厅 限制 高 席 比 检测 大 小 
高 度 : P55 ”包括 外 观 - 400x300 
订 自动 播放 
外 十 亲朋 内 


) 要 观看 视频 ， 请 在 浏览 器 中 祯 贞 页 面 * 


图 9.7 “插入 FLV” 对 话 框 


网 站 规划 与 网 页 设计 


(1)“ 视 频 类 型 ?下拉 列 表 中 有 两 种 类 型 :“ 累 进 式 下 载 视频 "和 "* 流 视频 "。“ 累 进 式 
下 载 视频 ”是 指 将 Flash 视频 (Flv) 文 件 下 载 到 站 点 访问 者 的 硬盘 上 ,然后 播放 。 但 是 ,与 
传统 的 “下 载 并 播放 ”视频 传送 方法 不 同 ,累进 式 下 载 允许 在 下 载 完 成 之 前 就 开始 播放 视 
频 文件 。“ 流 视频 ”模式 要 求 必 须 有 特定 服务 器 支持 ,一 般 选 用 “累进 式 下 载 视频 ”模式 。 

(2) 在 URL 文本 框 中 ,输入 Flash 视频 文件 名 ,或 单 击 “浏览 ”按钮 ,查找 视频 文件 
路 径 。 

(3) 从 “外 观 ” 下 拉 列 表 中 选择 外 观 类 型 。 所 选 外 观 的 预览 会 出 现在 “外 观 ” 文 本 框 下 
方 的 预览 窗 中 。 

(4) 单 击 “ 检 测 大 小 ”按钮 以 确定 FLV 文件 的 准确 宽度 和 高 度 。 但 是 ,有 时 
Dreamweaver 无 法 确定 FLV 文件 的 尺寸 大 小 。 在 这 种 情况 下 ,在 “宽度 ”和 “高 度 ” 文 本 
框 中 , 需 手 动 输入 数值 。 

(5) | 指定 在 Web 页 面 打 开 时 是 否 播放 视频 。 默 认 情况 下 取消 

(6 ep ey 指定 播放 控件 在 视频 播放 完成 之 后 是 否 返 回 起 始 位 置 
继续 播放 。 默 认 情 况 下 取消 选择 该 选项 。 

设置 完毕 后 , 单 击 “ 确 定 ” 按 钮 。 单 击 Flash Video 占 位 符 , 将 其 选中 ,在 “属性 ”面板 
中 设置 Flash 视频 的 属性 ,如 图 9.8 所 示 。 


属性 
| 向 FV Wi<00 “| 随机 二 砍 比 天 要 | 文件 avol av 类 四 | 无 司 
PLL 


四 boo 包括 外 观 : 400x300 贞观 [Clew Sian 1 (地 小 疯 度 ，140) 3 


屯 自动 锋 放 
订 自动 重新 竹 放 


图 9.8 设置 Flash 视频 属性 


9.2.4 插入 由 Flash Paper 软件 转换 的 SWF 文件 


Flash Paper 是 一 款 格 式 转换 软件 ,可 以 将 任何 可 打印 的 文档 转换 为 SWF 或 PDF 文 
档 。 原 文档 的 排版 样式 和 字体 显示 不 受 影响 ,不论 浏览 者 的 平台 和 语言 版 本 是 什么 ,都 可 
以 自由 地 观看 用 户 所 制作 的 电子 文档 动画 ,并 可 以 进行 自由 缩放 、 翻 页 .搜索 和 打印 等 操 
作 , 对 文档 的 传播 非常 有 好 处 。 

用 户 安装 Flash Paper 软件 后 ,打开 Word 软件 时 ,在 Word 里 就 会 增加 Flash Paper 
菜单 栏 和 Flash Paper 工具 栏 , 如 图 9. 9 所 示 。 


四 播 入 四 SR 工具 QD) 表格 LashPsper 窗口 呈 。 和 助 0 


FlashPaper 工 具 栏 
图 9.9 Word 中 的 Flash Paper 菜单 栏 和 工具 栏 


在 Word 中 , 单 击 Flash Paper 工具 栏 中 的 “转换 为 Flash” 按 钮 锚 . 即 可 将 当前 Word 
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文档 转换 为 SWF 格式 的 文件 。 将 它 可 以 作为 Flash 文件 插入 到 网 页 中 。 操 作 步 骤 如 下 。 

单 击 “ 插 入 ” 栏 一 “常用 ”按钮 组 一 “媒体 ”按钮 组 一 SWF 按钮 ,或 选择 “插入 ”菜单 一 
“媒体 ”一 SWF 命令 , 即 插入 SWF 文件 ,在 文档 窗口 中 出 现 一 个 Flash 占 位 符 ,可 拖 动 控 
制 点 ,根据 Flash Paper 文件 的 浏览 尺寸 改变 其 宽度 和 高 度 (以 像素 为 单位 )。 


9.2.5 在 网 页 中 嵌入 音频 文件 


在 网 页 中 加 入 背景 音乐 虽然 简便 ,但 是 浏览 者 缺乏 对 音频 文件 的 控制 能 力 。 比 如 浏 
览 者 不 想 听 到 背景 音乐 时 , 却 无 法 使 播放 的 声音 停 下 来 ,并 且 背 景 音 乐 所 支持 的 音频 文件 
格式 有 限 。 因 此 可 以 采用 媒体 插件 的 方式 嵌入 音频 文件 。 

网 页 中 的 音频 文件 格式 主要 为 MID 和 WAV, 几 乎 所 有 的 浏览 器 都 支持 这 两 种 声音 
格式 ,客户 端 无 需 插件 。 另 外 ,网 页 中 还 可 插入 mp3、rm、mwa 等 音频 文件 。 

单 击 “ 插 入 ?" 栏 一 "常用 "按钮 组 一 "媒体 "按钮 组 一 “插件 "按钮 ,弹出 “选择 文件 对话 
框 ,在 此 选择 音频 文件 的 路 径 , 单 击 “ 确 定 ” 按 钮 ,如 图 9. 10 所 示 。 


Es 
站 点 根 目录 
文件 名 自 ; CS 文件 系统 
a 个 教 据 大 站 点 和 服务 器 
查找 范围 中 | ) yinpine -|@?. 9- 
i a i De EB 
wsmwham 
文件 类 型 四 所 有 文件 .5 了 取消 


WRL; [Eile:///C /Aashyinpine/123. np3 者 教 ..- 
相对 于: 文档 可 Lh 


在 站 点 定义 中 更 改 团 认 的 梯 接 相对 于 
选择 的 文件 不 在 站 点 根 目录 下 。 


图 9.10 “选择 文件 "对话 框 


文档 窗口 出 现 插 件 占 位 符 ,选中 插件 占 位 符 , 拖 动 占 位 符 四 周 的 控制 柄 ,可 调整 播放 
器 界面 的 尺寸 ,如 图 9. 11 所 示 。 

此 处 单 击 “ 属 性 ”面板 中 “参数 "按钮 ,弹出 “参数 ”对 话 框 ,在 此 设置 相关 参数 ,如 图 9. 12 
所 示 。 或 在 插件 的 “标签 检查 器 ”面板 中 的 “属性 ”选项 卡 中 设置 相关 的 参数 ,如 图 9. 13 
所 示 。 

图 9. 12 所 示 的 “参数 ”对 话 框 中 各 参数 功能 如 下 。 

(1) Autostart: 是 否 自动 播放 ,参数 值 为 True 和 False, 选 择 True, 音 频 文件 将 自动 
播放 。 


9.12 “参数 ”对 话 框 
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图 9.11 插件 占 位 符 图 9.13 插件 的 标签 检查 器 


(2) Hidden: 播放 器 是 否 隐 藏 ,参数 值 为 True 和 False, 选 择 True, 将 隐藏 播放 器 ,无 
法 控制 播放 。 

(3) Loop: 音乐 播放 的 循环 次 数 ,参数 值 为 True、False 或 输入 一 个 具体 的 整数 值 ， 
选择 True, 音 频 文件 将 循环 播放 。 


9.2.6 在 网 页 中 嵌入 视频 文件 


随 着 宽带 网 络 技术 的 飞速 发 展 ,网 络 视频 点 播 已 经 普及 ,通过 网 络 可 以 在 线 看 免费 的 
影片 ,在线 收 看 远程 视频 课程 等 。 这 些 都 是 通过 在 网 页 中 嵌入 视频 文件 来 实现 的 。 

网 页 中 视频 文件 的 常见 格式 有 AVIRMVB、ASF、WMV 等 。 典 和 人 方法 与 音频 文件 
的 嵌入 方法 一 致 

单 击 “插入 ” 栏 一 "常用 ”按钮 组 一 "媒体 ?按钮 组 一 “插件 ”按钮 ,在 弹出 “选择 文件 ” 
对 话 框 中 查找 视频 文件 路 径 即 可 。 

在 文档 窗口 出 现 插件 占 位 符 ,根据 视频 画面 大 小 拖 动 插件 占 位 符 四 周 的 控制 点 改 
变 插件 尺寸 ,参数 设置 也 与 音频 文件 相似 ,这 里 就 不 重复 了 。 

在 网 页 中 还 可 以 插入 更 多 的 多 媒体 对 象 如 Shockwave、Java Applet、ActiveX 控件 
等 ,搬入 方法 与 上 面 所 述 相似 ,这 里 就 不 详细 叙述 了 。 


9.3 制作 多 媒体 网 站 实例 


本 节 详 细 讲解 例 9. 1 所 举 “ 娱 乐 在 线 ” 多 媒体 站 点 的 制作 过 程 。 网 站 功能 主要 是 实现 
视频 点 播 , 由 多 个 网 页 构成 ,通过 超 链接 将 网 页 关联 起 来 。 其 制作 过 程 如 下 。 
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1) 创建 本 地 站 点 

首先 创建 一 个 本 地 站 点 ,在 站 点 内 创建 几 个 子 文件 夹 : images 文件 夹 用 来 存放 图 像 
文件 ,shipin 文件 夹 用 来 存放 视频 文件 ,fla 文件 夹 用 来 存放 Flash 文件 ,yinpin 文件 夹 用 
来 存放 音频 文件 。 首 页 index. htm 保存 在 根 文件 夹 中 。 

2) 制作 首页 

(1) 首页 制作 采用 表格 排版 技术 。 插 入 一 个 3 行 3 列 的 表格 ,表格 宽度 为 960 像素 ， 
表格 的 间距 , 边 距 ,边框 均 为 0。 网 页 布局 结构 如 图 9. 14 所 示 。 


images/btswf images/110.swf 


导航 


导航 文本 1 images/zhangsh.gif 文本 2 


images/xiaohaijpg 


图 9.14 “娱乐 在 线 ” 首 页 结构 图 


(2) 第 一 行 的 第 一 个 单元 格 背 景 图 像 为 images/bg01. gif, 插 入 Flash 动画 images/ 
bt. swf; 另 两 个 单元 格 合并 ,背景 图 像 仍 为 images/bg01. gif; 插 入 Flash 文件 为 images/ 
110. swf, 改 变 Flash 动画 的 尺寸 ( 因 是 矢量 图 形 可 以 任意 改变 图 形 的 尺寸 ) 与 表格 宽度 相 
符 , 两 个 Flash 动画 的 背景 均 设置 为 透明 。 

(3) 第 二 行 共 三 列 , 左 右 两 侧 为 导航 文本 信息 ,中 间 是 图 片 和 文本 ,并 为 文本 添加 链接 。 

(4) 为 网 页 添加 背景 音乐 。 将 网 页 编辑 状态 切换 到 “代码 ”视图 ,在 二 head 二 和 去 / 
head 二 之 间 添 加 如 下 代码 : 二 bgsound src 一 "yinpin/gsls. mp3" loop 一 "一 1" 二 ,背景 音 
乐 将 循环 播放 。 保 存 网 页 ,首页 制作 完成 。 

3) 制作 其 他 页 面 

(1) 视频 网 页 的 制作 。 新 建 网 页 ,保存 为 shipin. htm, 单 击 “ 插 人” 栏 一 常用 ”按钮 
组 一 “媒体 ”按钮 组 “插件 ”按钮 ,弹出 “选择 文件 ”对 话 框 ,选择 文件 路 径 为 shipin/zsh. 
wmv; 再 插入 一 个 视频 文件 ,文件 路 径 为 shipin/finder. mov。 保 存 网 页 ,浏览 并 检查 网 
页 ,视频 播放 效果 如 图 9. 15 所 示 。 


xxx 的 TY: 其 实 很 受 你 


图 9.15 视频 文件 播放 效果 
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(2) Flash MTV 网 页 的 制作 。 新 建 一 个 页 面 ,将 其 保存 为 swf. htm。 单 击 “ 插 入 ” 
栏 一 “常用 ”按钮 组 一 “媒体 ”按钮 组 一 SWF 按钮 ,弹出 “选择 文件 ”对 话 框 ,选择 文件 路 径 
为 fla/liwen365. swf。 按 快捷 键 F12 浏览 并 检查 网 页 ,观察 Flash MTYV 播放 效果 ,如 图 9. 16 
所 示 。 


图 9.16 Flash MTYV 播放 效果 


(3) Flash Paper 网 页 的 制作 。 安 装 Flash Paper 软件 ,然后 打开 Microsoft Word 软 
件 , 将 DOC 文件 转换 为 SWF 文件 ,将 其 命名 为 flashpaper. swf。 

在 Dreamweaver 中 ,新 建 一 个 页 面 , 保 存 为 FlashPaper. htm。 单 击 “* 搬 和 人” 栏 一 “党 
用 ”按钮 组 一 媒体 "按钮 组 一 SWF 按钮 ,弹出 “选择 文件 ”对 话 框 ,选择 文件 路 径 为 fla/ 
flashpaper. swf, 拖 动 控制 点 ,改变 SWF 文件 浏览 界面 的 尺寸 。 按 快捷 键 F12 浏览 网 页 ， 
观察 Flash Paper 网 页 播放 效果 ,如 图 9. 17 所 示 。 


PE WIT IQ -0——[ | 日 日 > 


从 上 而 表单 的 工 作 巷 科 到 看 , 表单 的 开发 分 为 两 部 分 一 是 具体 在 网 页 上 制作 吧 希 的 到 
单项 日 ， 这 一 部 分 你 为 前 编 ， 证 要 在 Dresomweaver 中 例 作 ， 另 一 部 分 是 编写 处 理 家 单位 且 


鬼 开 用 科 抒 ， 这 一 部 分 称 为 所 益 。 如 : ASP、COI、PHP、JSP 等 ， 本 章 册 不 十 要 讲解 的 是 
前 岗 的 设计 ， 所 台 角 开发 将 在 网 络 税 抒 开发 中 具体 讲 到 

本 节 通 过 一 个 多 含 表单 网 页 实例 的 设计 来 说 明和 如何 创建 表单 和 这 加 表单 对 象 ， 如 间 6.3 
所 示 


图 9.17 Flash Paper 播放 效果 


(4) Flash 视频 网 页 的 制作 。 新 建 一 个 页 面 ,保存 为 flashvideo. htm。 单 击 * 插 入 ” 
栏 一 常用 ?按钮 组 一 "媒体 ”按钮 组 FLYV 按钮 ,弹出 “插入 FLV” 对 话 框 ,选择 视频 类 型 
为 “累进 式 下 载 视频 ”, 输 入 Flash Video 文档 路 径 为 fla/01. flv。 按 下 快捷 键 F12 浏览 网 
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页 ,Flash Video 播放 效果 如 图 9. 18 所 示 。 


图 9.18 Flash Video 播放 效果 


(5) 最 后 ,添加 导航 文本 的 链接 ,完成 多 媒体 网 站 的 制作 。 


本 章 小 结 


本 章 通过 制作 一 个 综合 性 多 媒体 站 点 的 实例 ,讲解 多 媒体 技术 在 网 络 中 的 应 用 。 
(1) Flash 对 象 的 应 用 : 如 何 插入 Flash 动画 、Flash 视频 等 。 

(2) 视频 文件 的 嵌入 : 各 种 视频 文件 的 做 入 使 网 络 在 线 点 播 成 为 时 尚 。 

(3) 音频 文件 的 应 用 : 如 何 设 置 背景 音乐 .嵌入 音频 文件 。 


练 习 题 


(1) 网 页 中 常用 的 多 媒体 对 象 包括 哪些 ? 
(2) Flash 视频 与 其 他 视频 格式 文件 比较 有 什么 优点 ? 
(3) 如 何 将 Flash 动画 的 背景 设置 为 透明 ? 


上 机 实验 


1. 实验 要 求 


(1) 制作 多 媒体 站 点 首页 。 

根据 给 定 的 网 页 草图 及 相关 素材 ,布局 页 面 ,插入 网 页 元 素 ,首页 内 容 包 括 Flash 影 
片 .修饰 的 一 些 图 像 及 按钮 .文本 .添加 超 链接 等 。 首 页 效果 图 如 图 9. 19 所 示 。 

(2) 制作 站 点 内 的 其 他 网 页 。 

制作 Flash MTV、Flash Video、 视 频 点 播 、 在 线 视听 等 多 个 网 页 ,最 后 添加 首页 与 其 
他 页 面 之 间 的 链接 。 


2. 背景 知识 


根据 本 章 介绍 的 在 网 页 中 嵌入 多 媒体 对 象 的 方法 ,再 综合 前 面 所 学 的 创建 站 点 及 编 


图 9.19 实验 : 多 媒体 站 点 首页 


辑 网 页 的 知识 ,制作 功能 完善 的 多 媒体 站 点 。 
3. 实验 准备 工作 


网 页 草图 和 网 页 素材 ,如 音频 、 视 频 、Flash 等 文件 ,还 有 相关 的 工具 软件 ,例如 将 
Flash Paper 软件 准备 好 ,发 送 到 学 生 主 机 中 ,以 供 学 生 参考 使 用 。 


4. 课时 安排 
上 机 实验 课时 安排 2 课时 。 
5. 实验 指导 


(1) 首先 制作 多 媒体 站 点 的 首页 ,首页 背景 颜色 设 为 深蓝 色 ( #012F47) ,该 网 页 的 布 
局 可 采用 表格 布局 技术 。 

(2) 在 第 1 行 单元 格 中 ,插入 Flash 动画 ,显示 为 文本 动画 “悠悠 在 线 视听 ”; 在 第 2 行 
单元 格 中 ,连续 插入 图 像 按 钮 ,构成 导航 条 ;在 第 3 行 插入 一 个 图 像 文 件 images/001. jpg; 
将 第 4 行 拆 分 为 2 个 单元 格 , 第 1 个 单元 格 插入 图 像 文件 images/once. jpg: 并 输入 文本 “ 李 
下: 爱 你 在 每 一 天 ”, 第 2 个 单元 格 插入 图 像 文 件 images/xuruyun. jpg, 并 输入 文本 :“ 许 茹 
云 : 好 听 ”; 最 后 一 行 插入 图 像 文件 images/002. jpg; 在 “代码 ”视图 二 head 之 和 所 /head> 中 
添加 背景 音乐 的 代码 :“ 一 bgsound src 王 "yinpin/halfmoon. mp3" loop 王 "一 1" 二 

(3) 制作 其 他 的 多 媒体 页 面 。 

Flashvideo. htm: 插入 一 个 Flash 视频 文件 fla/02. flv。 

Flashmtv. htm: 插入 一 个 Flash 动画 文件 fla/liwenonce. swf。 

Flashpaper. htm: 插入 一 个 Flash 文件 fla/flashpaper. swf。 

Shipin. htm: 插入 一 个 视频 文件 shipin/xuruyun. wmv。 

Yinpin. htm: 插入 一 个 音频 文件 yinpin/halfmoon. mp3。 

(4) 添加 图 像 按 钮 的 链接 ,浏览 并 检查 多 媒体 网 站 。 


本 章 首先 介绍 了 平面 设计 基础 理论 ,包括 图 像 类 型 、 图 像 分 辩 率 、 图 像 文 件 格式 、 图 像 
设计 的 分 类 等 ,接着 又 讲解 了 色彩 模式 和 网 页 配色 方案 ,最 后 通过 一 个 房地产 网 站 实例 ， 
详细 介绍 了 如 何 进行 网 页 设计 的 流程 。 


【本 章 学 习 目 标 】 


。 了 解 平 面 设 计 基 础 理论 : 图 像 类 型 .图 像 分 辨 率 、 图 像 文件 格式 .图像 设 计 的 分 
类 等 ; 

。 掌握 色彩 的 应 用 : 什么 是 色彩 模式 ,如 何 进行 网 页 配色 ; 

。 掌握 网 页 的 构图 : 构图 目的 、 构 图 性 质 、 构 图 的 视觉 表现 形式 ; 

。 掌握 网 页 设计 的 工作 流程 。 


10.1 平面 设计 基础 


平面 设计 是 一 切 设计 的 基础 ,符合 现代 社会 的 需求 , 它 能 将 视觉 设计 轻松 地 融 于 生 
活 , 在 设计 理念 和 组 织 形式 上 具有 创意 、 设 计 、 制 作 三 合 一 的 特点 。 


10.1.1 图 像 类 型 
1. 入 量 图 


矢量 图 形 是 用 线条 和 填充 色 等 数字 信息 来 描述 图 形 的 。 一 般 和 撩 量 格式 的 文件 通常 比 
较 小 ,对 矢量 图 进行 操作 ,改变 图 形 尺 十 ,形状 等 ,不 会 改变 图 形 的 显示 品质 ,如 图 10. 1 所 
示 。 制 作 矢 量 格式 图 形 的 软件 有 Freehand、CorelDraw、AutoCAD 等 。 

2. 位 图 

位 图 图 像 是 用 像素 点 描述 图 像 的 。 在 位 图 中 ,图 像 的 细节 由 每 一 个 像素 点 的 位 置 和 
色彩 来 决定 。 位 图 图 像 的 品质 与 图 像 生成 时 与 采用 的 分 辩 率 有 关 , 即 在 一 定 面积 的 图 像 
上 包含 有 固定 数量 的 像素 。 当 图 像 放 大 显示 时 ,图 像 变 成 马赛 克 状 ,因此 放大 图 像 的 尺 


寸 , 会 降低 图 像 的 显示 品质 ,如 图 10. 1 所 示 。 制 作 位 图 图 像 的 软件 常 有 Photoshop、 
Fireworks ImageReady 等 。 
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100% 矢 量 图 一 一 一 一 一 一 一 一 = 放大 到 800% 的 效果 


有 


100% 位 图 一 一 一 一 一 一 一 一 放大 到 800% 的 效果 


图 10.1 矢量 图 形 和 位 图 图 像 


10.1.2 ”图 像 分 辩 率 


分 辩 率 确定 了 一 幅 图 像 的 品质 和 能 够 打印 或 显示 的 细节 含量 。 分 辨 率 的 单位 为 像 
素 /英寸 (英文 缩写 为 dpi) ,表示 图 像 上 每 一 线性 英寸 的 像素 数 。 线 性 是 指 在 直线 上 计算 
像素 数 ,如 果 图 像 的 分 辩 率 是 72dpi, 即 每 英寸 72 个 像素 , 则 每 平方 英寸 上 有 5184 个 像 
素 。 假 设 图 像 中 的 像素 数 是 固定 的 ,增加 图 像 的 尺寸 将 降低 其 分 辨 率 , 反 之 亦 然 。 

分 辨 率 的 大 小 直接 影响 图 像 的 品质 。 分 辩 率 越 高 .图像 越 清 晰 ,文件 也 就 越 大 ,计算 
机 运行 就 越 慢 。 所 以 在 制作 图 像 时 ,不 同 品质 的 图 像 设置 适当 的 分 辩 率 即 可 。 例 如 打印 
输出 的 图 像 分 辩 率 就 需要 高 一 些 , 一 般 设 置 为 300dpi, 如 果 只 是 网 页 图 像 72dpi 就 足 
够 了 。 
10.1.3 图 像 文件 格式 


在 计算 机 绘图 中 ,有 较 多 的 图 形 和 图 像 处 理 软件 ,不 同 的 软件 所 保存 的 图 像 格 式 是 不 
尽 相同 的 。 

例如 : Photoshop 软件 所 支持 的 位 图 文件 格式 有 PSD、PSB、TIF、BMP、JPG、GIF 和 
PNG 等 20 余 种 格式 的 文件 。PSD 是 Photoshop 软件 的 源 文件 格式 ,可 保留 图 层 等 图 像 
文件 的 全 部 信息 。PSB(Photoshop Big) 格 式 用 于 存储 大 小 超过 2GB 的 文件 。 


10.1.4 图像 设 计 的 分 类 


1. 标志 设计 


标志 设计 是 一 种 符号 语言 , 它 通过 简单 的 造型 或 文字 来 表现 深刻 的 含义 和 寓意 ,突出 


设计 对 象 鲜明 的 个 性 特征 ,如 图 10.2 所 示 。 
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图 10.2 标志 设计 


2. 文字 设计 

文字 是 视觉 媒体 中 重要 的 构成 要 素 ,文字 排列 组 合 的 好 坏 ,直接 影响 着 版 面 的 视觉 传 
达 效 果 。 因 此 ,文字 设计 是 增强 视觉 传达 效果 、 提 高 作品 的 诉求 力 ,赋予 版 面 审美 价值 的 
一 种 重要 构成 技术 ,如 图 10. 3 所 示 。 


图 10.3 文字 设计 


3. 卡片 设计 


卡片 设计 主要 包括 名 片 .邀请 卡 、 工 作证 、 贺 卡 、 礼 品 券 .VIP 卡 、 请 柬 、 宣 传单 等 的 设 
计 。 卡 片 设计 要 求实 用 ,美观 ,这 样 才能 让 人 印象 深刻 、 爱 不 释 手 ,如 图 10.4 所 示 。 


561.755.1450 BCHPHOTO.COM 


图 10.4 卡片 设计 


4. 平面 广告 设计 


平面 广告 是 传递 信息 的 一 种 方式 ,是 广告 主 与 受众 间 的 媒介 ,其 结果 是 为 了 达到 一 定 
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的 商业 目的 或 政治 目的 。 平 面 广告 在 经 济 高 速 发 展 的 国家 是 不 可 缺少 的 ,如 图 10. 5 
所 示 。 


CHAREES THLEAIN 


图 10.5 招贴 海报 设计 


5. 产品 包装 设计 


包装 设计 是 将 美术 与 自然 科学 相 结 合 ,运用 到 产品 的 包装 保护 和 美化 方面 , 它 的 主要 
作用 是 保护 产品 和 宣传 产品 ,如 图 10. 6 所 示 。 
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图 10.6 产品 包装 设计 


6. 网 页 设计 


网 页 是 构成 网 站 的 基本 元 素 ,承载 各 种 网 站 应 用 的 平台 ,如 何 运 用 平面 设计 软件 制作 
出 让 浏览 者 流连 忘 返 的 精美 的 网 页 是 非常 关键 的 ,如 图 10.7 所 示 。 本 书 主要 介绍 利用 平 
面 设计 软件 进行 网 页 设计 。 

平面 设计 中 涉及 的 其 他 类 型 这 里 就 不 一 一 列举 了 。 
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图 10.7 网 页 设计 


10.2 色彩 的 应 用 


10.2.1 色彩 模式 


为 了 能 更 好 地 应 用 色彩 来 设计 网 页 , 先 来 介绍 一 些 色 彩 的 基本 概念 。 自 然 界 中 有 很 多 
种 色彩 ,比如 玫瑰 是 红色 的 ,大 海 是 蓝 色 的 , 橘 子 是 禁 色 的 等 。 但 是 最 基本 的 色彩 有 三 种 , 即 
红 \ 绿 、 蓝 ,其 他 的 色彩 都 可 以 由 这 三 种 色彩 调和 而 成 ,这 三 种 色彩 被 称 为 “三 原色 ”。 

现实 生活 中 的 色彩 可 以 分 为 彩色 和 非 彩色 。 其 中 黑 、 白 、 灰 色 属于 非 彩色 系列 ,其 他 
的 色彩 都 属于 彩色 ,如 图 10.8 和 图 10.9 所 示 。 


ee ee 2 
图 10.8 彩色 图 图 10.9 非 彩 色 图 
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下 面 介绍 三 种 常用 的 色彩 模式 。 
1. HSB 色彩 模式 


在 HSB 色彩 模式 中 ,任何 一 种 色彩 均 具 备 三 个 要 素 : 色相 (H)、 纯 度 (S) 和 明度 (B) 。 
把 这 三 个 要 素 做 成 立体 坐标 ,就 构成 色 立 体 。 非 彩色 只 有 明度 属性 ,如 图 10. 10 所 示 。 

1) 色相 H(Hue) 

色相 也 叫 色调 , 指 颜色 的 种 类 和 名 称 , 是 颜色 的 基本 特征 ,是 一 种 颜色 区 别 于 其 他 颜 
色 的 因素 。 色 相 与 色彩 的 强 弱 及 明暗 没有 关系 ,只 是 纯粹 表示 色彩 相貌 的 差异 。 如 红 、 
橙黄 \ 绿 、 蓝 、 紫 等 不 同 的 基本 色相 ,如 在 各 色 中 间 加 插 一 两 个 中 间 色 ,其 头 尾 色相 按 光 谱 
顺序 排列 为 红 、 红 橙 . 橙 、 黄 橙黄 、 黄 绿绿 、 蓝 绿 、 蓝 、 蓝 紫 . 紫 ` 红 紫 , 即 为 12 基本 色相 ,如 
图 10. 11 所 示 。 


色相 环 


图 10.10 色 立 体 图 10.11 12 色 相 环 


2) 纯度 S(Saturation) 

纯度 也 叫 饱 和 度 , 指 色彩 的 鲜艳 程度 。 以 正 红 为 例 , 有 鲜艳 无 杂质 的 纯 红 ,有 涩 而 干 
残 的 “ 凋 玫 瑰 ”, 也 有 较 淡 薄 的 粉红 。 一 般 来 说 ,原色 最 纯 , 混 合 的 颜色 越 多 则 纯度 逐渐 减 
低 。 如 某 一 鲜亮 的 颜色 ,加 入 了 白色 或 者 黑色 ,使 得 它 的 纯度 降低 ,颜色 趋 于 柔和 、 沉 稳 。 

3) 明度 B(Brightness) 

明度 也 叫 亮度 , 指 颜色 的 深浅 和 明暗 程度 ,没有 色相 和 饱和 度 的 区 别 。 不 同 的 颜色 , 反 
射 的 光量 强 弱 不 一 ,因而 会 产生 不 同 程度 的 明暗 。 非 色彩 的 黑 、 灰 、 白 三 色 较 能 形象 地 表达 
这 一 特质 。 白 色 为 最 亮 , 黑 色 为 最 暗 , 黑 白 之 间 不 同 程度 的 灰 ,都 具有 明暗 强度 的 表现 。 彩 色 
则 根据 自身 所 具有 的 明度 值 ,并 通过 加 减 灰 、 白 来 调节 明暗 ,如 图 10. 12(a) 和 图 10. 12(b) 所 示 。 


2. RGB 模式 


RGB 色彩 模式 是 工业 界 的 一 种 颜色 标准 ,表示 红色 ,绿色 、 蓝 色 , 又 称 为 三 原色 光 , 英 
文 为 RCRed) 、.G(Green) 、B(Blue) ,通过 它们 相互 之 间 的 和 至 加 来 得 到 各 种 颜色 。 

通常 情况 下 ,RGB 各 有 256 级 亮度 ,用 数字 表示 为 从 0,1,2,…,255, 共 256 级 。 
256 级 的 RGB 色彩 总 共 能 组 合 出 约 1678 万 种 色彩 , 即 256X256X256 二 16777216, 通 常 


(a) 明度 高 (b) 明度 低 
图 10.12 明度 


也 被 简称 为 1600 万 色 或 千 万 色 , 也 称 为 24 位 色 (2 的 24 次 方 ) 。 
对 于 单独 的 R 或 G 或 B 而 言 , 当 数值 为 0 时 ,代表 这 种 颜色 不 发 光 ; 如 果 为 255, 则 该 颜 
色 为 最 高 亮度 。 因 此 当 RGB 三 种 色光 都 发 到 最 强 的 亮度 ,RGB 值 就 为 255,255,255, 表 示 
纯 白色 。 黑 色 的 RGB 色 值 即 为 0,0,0。 同 理 , 纯 红 的 色 值 是 255,0,0; 纯 绿 的 色 值 就 是 
0,255,0; 而 纯 蓝 的 色 值 就 是 0,0,255。 黄 色 较 特殊 ,是 由 红色 加 绿色 而 得 , 即 255,255,0。 
RGB 模式 是 显示 器 的 物理 色彩 模式 。 这 就 意味 着 无 论 在 软件 中 使 用 何 种 色彩 模式 ， 
只 要 是 在 显示 器 上 显示 的 ,图 像 最 终 就 是 以 RGB 方式 出 现 。 


3. CMYK 色彩 模式 


C: 青色 (cyan) .M: 洋红 色 (magenta) ,.Y: 黄色 (yellow) ,K: 黑色 (black)。CMYK 色彩 
模式 针对 印刷 媒介 , 即 基 于 油墨 的 光 吸 收 /反射 特性 ,眼睛 看 到 的 颜色 实际 上 是 物体 吸收 
白光 中 特定 频率 的 光 而 反射 其 余 光 的 颜色 。 

也 就 是 说 ,CMYK 在 印刷 中 代表 四 种 颜色 的 油墨 ,每 种 CMYK 四 色 油 墨 可 使 用 从 0 一 
100% 的 值 。CMY 为 减 色 原理 ,CMY 以 白色 为 底 色 减 , 即 CMY 均 为 0 是 白色 , 均 为 100% 
是 黑色 (但 在 实际 应 用 中 ,由 于 油墨 的 纯度 等 问题 造成 得 不 到 纯正 的 黑色 ,因此 才 引 入 黑色 )。 

注意 : 在 Photoshop 中 ,准备 用 印刷 颜色 打印 图 像 时 ,应 使 用 CMYK 模式 。 如 果 是 
基于 RGB 图 像 进行 设计 的 ,完成 编辑 后 ,最 好 将 图 像 转 换 为 CMYK 模式 后 再 打印 。 如 
以 RGB 模式 直接 输出 图 片 打印 ,印刷 品 实际 颜色 将 与 RGB 预览 颜色 有 较 大 差异 。 


10.2.2 色彩 的 应 用 


色彩 使 宇宙 万 物 充满 情感 ,生机 勃勃 。 色 彩 作为 一 种 最 普遍 的 审美 形式 ,存在 于 人 们 
日 常生 活 的 各 个 方面 ,人 们 的 衣 、 食 、 住 . 行 . 用 都 与 色彩 发 生 着 密切 的 联系 。 
1) 色彩 的 冷暖 


红 \ 橙 、 黄 等 颜色 使 人 联想 到 阳光 、 烈 火 , 故 称 为 “暖色 ”; 绿 、. 青 、 蓝 等 颜色 与 黑夜 、 寒 准 
相连 , 故 称 为 “冷色 ”。 


2) 色彩 的 轻重 

各 种 色彩 给 人 的 轻重 感 不 同 。 从 色彩 得 到 的 重量 感 ,是 质感 与 色 感 的 复合 感觉 。 浅 
色 密 度 小 ,给 人 质量 轻 的 感觉 ; 深 色 密 度 大 ,给 人 分 量 重 的 感觉 。 

3) 色彩 的 前 进 与 后 退 

如 果 等 距离 地 观察 两 种 颜色 ,可 以 给 人 不 同 的 远近 感 。 暖 色 比 冷色 更 富有 前 进 的 特 
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性。 两 色 之 间 ,亮度 偏 高 的 色彩 呈 前 进 性 ,饱和 度 偏 高 的 色彩 也 呈 前 进 性 。 

4) 色彩 的 艳丽 与 素雅 

如 果 是 单 色 ,饱和 度 越 高 , 则 色彩 越 艳丽 。 饱 和 度 越 低 , 则 色彩 越 素雅 。 除 了 饱和 度 ， 
亮度 也 起 到 一 定 的 作用 。 不 论 什么 颜色 ,亮度 高 时 ,即使 他 和 度 低 也 给 人 以 艳丽 的 感觉 。 


10.2.3 配色 方案 的 应 用 实例 


红色 让 人 联想 到 玫瑰 、 喜 庆 、 兴 奋 ;白色 使 人 联想 到 纯洁 ,干净 、 简 洁 ; 紫 色 象 征 着 女性 
化 ,高 雅 ,浪漫 ; 蓝 色 象征 高 科技 稳重、 理智 ;橙色 代表 了 欢快 .甜美 ,收获 ;绿色 代表 充满 
青春 的 活力 .舒适 ,希望 等 。 当 然 不 是 说 某 种 色彩 一 定 代 表 了 什么 含义 。 在 特定 的 场合 
下 , 同 种 色彩 可 以 代表 不 同 的 含义 。 更 多 的 色彩 知识 可 参考 专业 的 色彩 理论 与 应 用 方面 
的 书籍 ,这 里 仅 介 绍 几 种 常用 的 网 页 色彩 配色 实例 。 


1. 红色 色 系 


红色 是 最 鲜明 生动 的 .最 热烈 的 颜色 ,因此 红色 也 是 代表 热情 的 情感 之 色 。 鲜 明 红 色 
极 容易 吸引 人 们 的 目光 。 在 主要 由 红色 成 分 构成 的 色彩 中 ,粉红 色 象 征 浪漫 , 温 雇 ,上 暗 红 
色 象 征 神秘 、 深 沉 ,桃红 色 和 象征 时 尚明 亮 。 下 面 研究 的 是 红色 的 配色 规律 。 

高 亮度 的 红色 通过 与 灰色 、 黑 色 等 非 彩色 搭配 使 用 ,可 以 得 到 现代 且 激 进 的 感觉 。 

低 亮 度 的 红色 具有 冷静 沉重 的 感觉 ,可 以 营造 古典 的 氛围 。 

红色 如 果 与 亮度 、 饱 和 度 较 强 的 冷色 (如 蓝 色 绿色) 相配 ,中 间 最 好 能 有 一 些 过 渡 性 
的 颜色 ;如 纯 红 与 纯 蓝 相配 时 ,中 间 可 以 插入 面积 适中 的 白色 ;大 红 与 大 绿 相配 时 ,中 间 可 
以 用 棕色 或 黑色 间隔 ,如 图 10. 13 所 示 。 
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图 10.13 网 页 红色 系 配 色 案 例 


2. 蓝 色 色 系 


蓝 色 是 色彩 中 比较 沉静 的 颜色 , 它 是 现代 商务 领域 常用 的 流行 色 。 蓝 色 与 绿色 白色 
的 搭配 在 现实 生活 中 随处 可 见 。 


主 色 调 选 择 明亮 的 蓝 色 , 配 以 白色 的 背景 和 灰 亮 的 辅助 色 ,可 以 使 站 点 干净 而 整洁 ， 
给 和 庄重、 充实 的 印象 。 


蓝 色 、 青 绿色 、 白 色 的 搭配 可 以 使 页 面 看 起 来 非常 干净 清澈 ,如 图 10. 14 所 示 。 
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图 10.14 网 页 蓝 色 系 配 色 案 例 


3. 其 他 色 系 


1) 橙色 

使 用 高 亮度 的 橙色 的 站 点 通常 都 会 给 人 以 一 种 晴朗 新 鲜 的 感觉 ,而 通过 将 黄色 、 绿 色 
等 颜色 与 橙色 搭配 使 用 ,通常 能 得 到 非常 好 的 效果 ,而 中 等 色调 的 橙色 类 似 于 泥土 的 颜 
色 , 用 来 创造 自然 的 氛围 。 

2) 黄色 

阳光 的 色彩 ,具有 活泼 与 轻快 的 特点 ,给 人 十 分 年 轻 的 感觉 。 浅 黄色 表示 柔弱 , 灰 黄 
色 表 示 病 态 。 高 彩 度 的 黄色 与 黑色 搭配 得 到 清晰 整洁 的 效果 ;采用 同一 色调 的 深 褐色 与 
黄色 搭配 ,可 以 表达 一 种 成 熟 的 城市 时 尚 感觉 。 
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3) 绿色 

绿色 代表 生命 与 希望 ,充满 了 青春 活力 ,经 常用 于 与 自然 ,健康 相关 的 站 点 。 与 绿色 
搭配 的 近似 色 有 其 他 种 类 的 绿色 ` 蓝 绿色 、 黄 绿色 、 较 柔和 的 紫色 等 :与 橙色 黄色 .白色 等 
搭配 可 以 形成 鲜明 对 比 的 色彩 组 合 , 与 橙色 的 搭配 将 是 非常 不 错 的 选择 。 


4.， 黑 和 白灰 色彩 


黑白 灰 是 万 能 色 , 可 以 跟 任意 一 种 色彩 搭配 。 当 用 户 为 某 种 色彩 的 搭配 藻 恼 时 ,不 妨 
试 试用 黑白 灰 。 当 用 户 觉得 两 种 色彩 的 搭配 不 协调 , 试 试 加 入 黑色 ,或 者 灰色 。 对 一 些 明 
度 较 高 的 网 站 , 配 以 黑色 ,可 以 适当 地 降低 其 明度 。 

白色 是 网 站 用 得 最 普遍 的 一 种 颜色 。 很 多 网 站 甚至 留 出 大 块 的 白色 空间 ,作为 网 
站 的 一 个 组 成 部 分 ,这 就 是 留 白 艺术 。 留 白 ,给 人 一 个 遐想 的 空间 ,让 人 感觉 心情 舒 
适 、 畅 快 ,恰当 的 留 白 对 于 协调 页 面 的 均衡 起 到 相当 大 的 作用 。 艺 术 性 网 站 较 多 运用 
留 白 艺术 。 

一 个 网 站 不 可 能 单一 地 运用 一 种 颜色 ,这 会 让 人 感觉 单调 ,乏味 ;但 是 也 不 可 能 将 所 
有 的 颜色 都 运用 到 网 站 中 ,这 会 让 人 感觉 轻浮 .花哨 。 一 个 网 站 必须 有 一 种 或 两 种 主题 
色 ,不 至 于 让 浏览 者 迷失 方向 ,也 不 至 于 单调 ,乏味 。 所 以 确定 网 站 的 主题 色 也 是 设计 者 
必须 考虑 的 问题 之 一 。 

一 个 页 面 尽 量 不 要 超过 4 种 色彩 ,用 太 多 的 色彩 让 人 没有 方向 .没有 侧重 点 。 当 主题 
色 确 定好 以 后 ,考虑 其 他 配色 时 ,一 定 要 考虑 其 他 配色 与 主题 色 的 关系 ,要 体现 什么 样 的 
效果 ? 哪 种 因素 占 主要 地 位 ,是 明度 .纯度 还 是 色相 ? 

如 想 了 解 更 多 的 配色 知识 ,请 查看 (网 页 设计 配色 实例 分 析 》 等 参考 书籍 。 


10.3 网 页 的 构图 设计 


10.3.1 构图 概述 


构图 一 词 来 自 英语 单词 composition ,为 造型 艺术 的 术语 。 它 的 含义 是 : 把 各 部 分 组 
成 ,结合 ,配置 并 加 以 整理 出 一 个 艺术 性 较 高 的 画面 。 在 《辞海 ) 中 ,将 “构图 ”解释 为 艺术 
家 为 了 表现 作品 的 主题 思想 和 美感 效果 ,在 一 定 的 空间 ,安排 和 处 理 人 、 物 的 关系 和 位 置 
时 ,把 个 别 或 局 部 的 形象 组 成 艺术 的 整体 。 

在 中 国 传统 绘画 中 ,将 构图 称 为 “章法 ”或 “布局 ”或 “经 营 位 置 "。 这 个 术语 中 包含 着 
一 个 基本 而 概括 的 意义 , 那 就 是 把 构成 整体 的 那些 部 分 统一 起 来 ,在 有 限 的 空间 或 平面 上 
对 笔者 所 表现 的 元 素 进行 组 织 , 形 成 画面 的 特定 结构 ,借以 实现 设计 者 的 表现 意图 。 构 图 
是 指 画 面 形象 安排 和 组 合 的 经 验 手 法 。 我 们 通常 说 的 构图 法 一 一 均衡 、 对称、 分割、 对 比 、 
视点 ,就 是 要 通过 位 置 关系 ,突出 主体 , 主 次 分 明 , 赏 心 悦 目 。 如 果 考 虑 得 更 广阔 一 些 , 则 
还 要 : 考虑 照片 中 所 有 元 素 的 存在 以 及 各 个 元 素 之 间 的 相互 关系 ,这 些 元 素 不 仅 包括 明 
确 的 实体 ,还 有 那些 看 得 见 的 光影 虚实 、 气 氛 、 情 感 也 是 构图 。 

构图 还 需 讲究 艺术 技巧 和 表现 手法 ,在 我 国 传统 艺术 里 叫 “ 意 匠 ”。 意 匠 的 精 拙 ,直接 
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关系 到 一 幅 作品 意境 的 高 低 。 任 何 视觉 设计 都 离 不 开 构图 ,如 绘画 .平面 设计 ,摄影 影 
视 、 广 告 等 。 


1. 构图 的 目的 


每 一 个 设计 题材 ,不 论 它 平淡 还 是 宏伟 ,重大 还 是 普通 ,都 包含 着 视觉 美 点 ,简称 视觉 
焦点 或 视觉 兴趣 点 。 当 我 们 观察 生活 中 的 具体 物象 人 、 树 , 房 或 花 的 时 候 , 应 该 撤 开 它们 
的 一 般 特 征 , 而 把 它们 看 作 是 形态 、 线 条 、 质 地 、 明 暗 、 颜 色 、 用 光 和 立体 物 的 结合 体 , 可 以 
将 这 些 归 纳 为 点 线 , 面 。 构 图 的 基本 任务 ,是 最 大 可 能 地 阐明 艺术 家 的 构思 。 即 把 构思 中 
典型 化 了 的 人 或 物 加 以 强调 、 突 出 ,从 而 舍弃 那些 一 般 的 、 表 面 的 ,繁琐 的 ,次 要 的 东西 ,并 恰 
当地 安排 陪衬 体 ,选择 环境 ,使 作品 比 现实 生活 更 高 .更 强烈 更 完善 .更 集中 、 更 典型 .更 理 
想 ,以 增强 艺术 效果 。 总 之 ,构图 的 任务 就 是 把 一 个 设计 主题 的 思想 情感 传递 给 别人 。 


2. 构图 的 性 质 


构图 和 设计 可 以 通用 ,因为 它们 的 含义 是 一 样 的 。 设 计 的 精确 概念 和 它 的 原始 含义 是 
构思 , 即 艺术 家 为 了 明确 地 表达 自己 的 思想 而 适当 安排 各 种 视觉 要 素 的 那 种 构思 。 

古人 将 章法 (构图 ) 比 作 下 棋 , 因 此 构图 称 为 画面 总 要 ,所 谓 总 要 就 是 纲要 、 概 要 ,意思 
是 画面 构图 像 写 文章 一 样 ,做 到 有 章 有 法 ,有 次 有 主 ,相互 呼应 ,虚实 对 比 。 藏 露 隐现 , 简 
繁 适中 , 玖 密 有 间 等 的 构图 规律 ,应 服从 于 主题 表现 的 要 求 ,同时 又 要 取得 整体 形式 感 的 
完美 和 谐 的 统一 。 


3. 构图 的 视觉 表现 形式 


将 表现 主题 的 各 个 构成 要 素 按照 主 次 关系 放置 在 画面 相应 的 区 域 , 形 成 视觉 感受 , 达 
到 设计 意图 就 叫 构图 。 主 体 元 素 与 辅助 元 素 按 照 什 么 形式 规格 出 现 就 是 构图 的 视觉 表现 
形式 。 不 同 的 主题 .产品 使 用 不 同 的 构图 形式 有 着 内 在 的 规律 ,无 论 是 摄影 .平面 广告 、 
BANNER .互动 设计 稿 在 构图 上 的 原理 是 一 致 的 。 下 面 以 门户 网 站 的 BANNER 为 例 讲 
解构 图 的 形式 及 相应 的 特征 分 析 。 

如 图 10. 15 所 示 的 构图 表现 形式 (一 ) .这 种 构图 形式 能 充分 显示 景物 的 高 大 和 深度 。 
摄影 方面 常用 于 表现 郁郁 葱 葱 的 森林 与 参天 大 树 险峻 的 山石 飞 演 的 瀑布 .摩天 大 楼 ,以 
及 竖 直 线形 组 成 的 其 他 画面 。 在 产品 BANNER 设计 方面 常用 于 表现 单薄 细 长 的 物体 。 
这 种 构图 给 人 以 满足 的 感觉 ,画面 结构 完美 无 缺 ,安排 巧妙 ,对 应 而 平衡 。 


图 10.15 构图 表现 形式 (一 ) 
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如 图 10. 16 所 示 的 构图 表现 形式 (二 ) ,这 种 构图 形式 分 为 立 式 斜 垂 线 和 平 式 斜 横 线 
两 种 。 摄 影 方面 常用 来 表现 运动 .流动 .倾斜 动荡 、 失 衡 、 紧 张 、 危 险 , 一 泻 千 里 等 场面 。 
也 有 的 画面 利用 斜 线 指出 特定 的 物体 ,起 到 一 个 固定 导向 的 作用 。 设 计 方 面 用 于 表现 运 
动 鞋 . 运 动 服 , 细 长 的 铅笔 牙刷、 灯 管 等 产品 对 象 。 


sg 


ew 


图 10.16 构图 表现 形式 (二 ) 


以 主体 为 核心 ,元 素 旦 向 四 周 扩散 放射 的 构图 形式 ,常用 于 需要 突出 主体 而 元 素 多 而 
复杂 的 场景 ,或 是 产品 多 但 单个 产品 和 画面 比例 严重 失调 的 情况 ,也 适合 表现 单薄 细 长 的 
物体 或 是 中 景 拍摄 的 物体 。 

如 图 10. 17 所 示 的 构图 表现 形式 (三 ), 这 种 构图 形式 把 主体 安排 在 对 角 线 上 ,能 
有 效 地 利用 画面 对 角 线 的 长 度 ,同时 也 能 使 广告 词 与 主体 发 生 直接 关系 。 构 图 效果 富 
于 动感 ,显得 活泼 ,容易 产生 线条 的 汇聚 趋势 ,吸引 人 的 视线 ,达到 主体 突出 而 视觉 均 
衡 的 效果 。 
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图 10.17 构图 表现 形式 (三 ) 


正三 角形 有 安定 感 , 道 三 角形 具有 不 安定 的 动感 效果 。 以 三 个 视觉 中 心 为 景物 的 主 
要 位 置 , 有 时 是 以 三 点 成 一 面 的 几何 形成 安排 景物 的 位 置 ,形成 一 个 稳定 的 三 角形 。 这 种 
三 角形 可 以 是 正三 角 ,也 可 以 是 斜 三 角 或 倒 三 角 。 其 中 斜 三 角形 较为 常用 ,也 较为 灵活 。 
三 角形 构图 具有 安定 ,均衡 .灵活 等 特点 。 
如 图 10. 18 所 示 的 构图 表现 形式 (四 ) ,用 景物 的 框架 作 前 景 ,能 增加 画面 的 纵向 对 比 
和 装饰 效果 ,使 照片 产生 深度 感 。 设 计 方面 用 主 元 素 左右 填充 形成 中 间 空 白 , 空 白 处 放置 
告 词 。 将 主体 或 重要 元 素 放 在 “九宫 格 ?交叉 点 的 位 置 上 .“ 井 " 字 的 四 个 交叉 点 就 是 主 
体 的 最 佳 位 置 。 一 般 认为 ,右上 方 的 交叉 点 最 为 理想 ,其 次 为 右 下 方 的 交叉 点 。 但 也 不 是 
一 成 不 变 的 。 这 种 构图 格式 较为 符合 人 们 的 视觉 习惯 ,使 主体 自然 成 为 视觉 中 心 ,具有 突 
出 主体 ,并 使 画面 趋向 均衡 的 特点 。 


广告 词 


图 10.18 构图 表现 形式 (四 ) 
10.3.2 ”构图 范例 欣赏 


图 10. 19 一 图 10. 23 所 示 为 一 些 典型 构图 形式 的 实例 。 
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图 10.19 垂直 式 构图 


10.20 倒 三 角 式 构图 


图 10.22 放射 式 构图 图 10.23 和 斜 线 式 构图 


图 10. 19 采用 垂直 式 构图 。 垂 直 式 构图 的 前 提 是 画面 中 的 模特 是 中 景 距离 ,模特 外 
形 细 长 。 

图 10. 23 采用 和 斜 线 式 构图 的 原因 是 因为 产品 细 长 .形体 很 单薄 ,是 线 状 , 不 容易 形成 
面 的 感觉 ,所 以 产品 组 织 时 适合 用 单 向 斜 线 。 

当然 ,应 根据 不 同 的 行业 产品 ,不同 的 产品 特性 灵活 运用 构图 来 表现 设计 主题 和 设计 
形式 美 , 如 图 10. 24 所 示 。 


图 10.24 生活 中 的 构图 
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10.4 网 页 设计 的 流程 


10.4.1 网 页 策划 


在 进行 网 站 页 面 设计 之 前 ,必须 对 企业 有 足够 的 了 解 ,对 网 站 的 定位 、 背 景 收 入 、 预 
期 效果 ,有 一 个 足够 清楚 的 认识 。 

下 面 以 一 个 企业 网 站 为 例 , 如 图 10. 25 所 示 。 这 是 一 个 关于 为 企业 提供 电子 商务 服 
务 的 企业 网 站 ,类 型 是 电子 商务 网 站 ,主要 客户 群 是 欧美 用 户 , 针 对 的 是 企业 的 潜在 服务 
对 象 ,提供 网 站 建设 ,搜索 引擎 优化 ,视觉 效果 设计 等 服务 ,可 通过 支付 宝 的 方式 进行 支 
付 。 设 计 者 参与 了 网 站 建设 方案 的 讨论 ,提出 了 自己 意见 或 建议 ,将 它 定 位 于 一 个 极 具 立 
体质 感 ,充满 了 现代 气息 的 电子 商务 网 站 。 
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图 10.25 网 站 效果 图 


10.4.2 设计 网 页 原型 图 


网 页 原型 图 的 初稿 可 以 是 纸 质 ,也 可 以 是 用 电脑 绘制 的 简单 图 形 。 初 稿 不 用 太 规 整 ， 
只 需要 列 出 必需 的 模块 与 功能 , 即 考虑 网 站 的 大 体 结构 是 否 合理 ,功能 是 否 有 缺失 ,功能 
模块 如 何 摆 放 等 。 

线 框 原 型 图 完成 后 ,这 个 网 站 的 雏形 就 已 经 勾勒 出 来 了 。 此 时 需要 与 客户 沟通 ,询问 
是 否 有 不 妥 之 处 。 当 原型 图 没有 任何 问题 的 时 候 , 开 始 下 一 步 设计 。 


10.4.3 设计 网 页 效果 图 


首先 应 确定 整个 网 站 的 主 色调 ,这 里 使 用 了 商务 的 常用 色 灰 色 和 蓝 色 。 根 据 网 站 的 
需求 ,在 首页 上 突出 立体 效果 的 BANNER ,而 让 周围 的 模块 弱化 。 细 节 上 ,没有 过 多 花 
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哨 的 设计 ,应 用 几 个 简单 的 渐变 ,以 及 纯色 块 ,会 更 加 符合 网 站 的 定位 与 受众 群 。 特 别 要 
注意 的 是 ,网 站 必须 规整 ,严谨 ,才能 体现 出 设计 者 的 专业 水 准 。 应 与 客户 探讨 一 些 细节 
上 的 问题 , 进行 网 页 效果 图 的 细 化 和 完善 ,最 后 确定 网 站 总 体 效 果 。 网 站 效果 如 
图 10. 25 所 示 。 


10.4.4 ”网 页 设计 实例 一 一 房地产 网 站 首页 设计 
1. 设计 构思 


皇家 帝王 广场 项 目 将 建成 集 生态 .居住 ,商务 为 一 体 的 城市 标志 性 住宅 小 区 ,作为 政 
府 重 点 形象 工程 。 楼 盘 定 位 为 皇家 高 贵 血 统 , 楼 盘 的 卖 出 在 同一 个 城市 下 不 同 的 生 
活 品位 和 生活 方式 ,核心 广告 词 为 “一 样 的 城市 ,不 一 样 的 生活 “用 世界 的 高 度 定义 品质 
豪宅 ”“ 大 势 之 下 ,财富 新 坐标 ”。 在 表现 上 ,楼盘 是 地 标 性 建筑 群 ,具有 皇家 血统 元 素 , 拥 
有 皇家 园林 主题 景观 ,在 设计 上 表现 皇家 高 贵 气质 ,因此 设计 要 让 人 感受 到 高 品质 的 生活 
方式 风格 。 


2. 设计 前 的 准备 工作 


1) 通过 LOGO 对 楼 盘 定 位 进行 解析 

楼 盘 的 LOGO 是 楼 盘 概 念 的 浓缩 版 ,从 LOGO 可 以 看 出 楼 盘 的 基本 信息 。 中 式 LOGO 
含有 书法 ,水墨 等 元 素 ,欧式 LOGO 带 有 明显 的 欧式 特征 ,如 马车 、 
花纹 ,金属 质感 雕塑 等 ,此 案例 的 LOGO 使 用 的 元 素 有 欧式 宝剑 、 
花纹 ,楼 盘 文字 信息 有 “皇家 帝王 广场 ”, 如 图 10. 26 所 示 。 

2) 撰写 软文 

楼 盘 位 于 城市 版 图 核心 ;环境 一 一 开创 市 中 心 极品 人 居 和 氛围 ; 
景观 一 一 打造 帝王 私 属 园林 ;停车 一 一 阳光 生态 车 库 ;建筑 一 一 高 
品质 生活 社区 ;商业 一 一 风情 商业 街区 。 

3) 搜索 关键 字 图 10.26 楼 盘 网 站 

准备 素材 之 前 先 对 出 现 的 元 素 进 行 关键 字 搜索 ,如 以 关键 字 皇 ee 
家 、\ 帝 王 、 皇 冠 . 王 座 、 广 场 .欧式 花纹 宝剑、 国王 金属 奢华 高贵 .富丽 堂 皇 等 搜索 素材 。 

4) 按 关键 词 发 散 思维 

准备 好 基本 的 关键 词 ,对 关键 词 进行 筛选 .过 滤 .如 图 10. 27 所 示 。 


图 10.27 关键 字 发 散 思维 
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5) 收集 素材 

关键 词 具 体 化 后 ,可 以 到 素材 网 站 上 下 载 所 需 的 素材 ,要 求 素材 的 精度 要 高 ,背景 类 
素材 的 尺寸 要 求 不 低 于 1024X768( 像 素 ) ,辅助 素材 不 低 于 800X600( 像 素 ) ,尺寸 越 大 越 
好 , 越 清 晰 越 好 ,如 图 10. 28 所 示 。 


(b) 楼 盘 制作 素材 


(0) 广告 词 对 应 素材 
图 10.28 素材 


3. 网 站 首页 页 面 设计 

(1) 先 将 画面 分 成 上 .中 \、 下 三 栏 ,LOGO 在 上 边 一 栏 的 中 间 排 列 ,将 菜单 做 成 金属 感 
效果 ,菜单 间 的 空隙 要 比 LOGO 左右 两 边 的 空隙 小 ,利用 调整 图 层 控制 LOGO 背景 的 光 
效 。 为 了 增强 菜单 背景 的 肌理 质感 ,适合 在 背景 上 辅 以 欧式 花纹 ,如 图 10. 29 所 示 。 
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(2) 构建 场景 。 先 将 城市 背景 元 素 添加 进来 ,在 放置 背景 城市 的 时 候 一 般 要 重心 下 
移 留 出 天 空 的 位 置 ,同时 留 出 放 广 告 词 的 位 置 , 不 要 把 画面 塞 得 很 满 ,如 图 10. 30 所 示 。 


图 10.30 首页 场景 设计 


(3) 图 像 的 合成 。Photoshop 中 将 城市 和 天 空 混合 。 夯 面 上 面 是 天 空 图 片 ,下 面 是 
城市 。 将 城市 的 图 层 混合 模式 设置 为 正片 生 底 ,然后 在 下 面 建 图 层 ,用 “钢笔 ”工具 将 大 楼 


的 外 轮廓 描 出 路 径 , 用 白色 填充 ,多 做 几 个 图 层 分 别 用 白色 值 填充 ,便于 以 后 修改 ,具体 参 
数 如 图 10. 31 所 示 。 再 用 调整 图 层 将 右边 天 空 的 云 调整 得 亮 些 , 如 图 10. 32 所 示 。 


了 国 控制 城市 主体 楼 层 清晰 显示 

白色 底 3- 用 来 衬托 正片 答 ， 
白色 认 2- 用 来 衬托 正片 委 … 
白色 认 1- 用 来 衬托 正片 委 … 
白色 语 1- 用 来 衬托 正片 秋 … 


图 10.31 在 Photoshop 中 设置 图 层 混合 模式 
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(4) 摆 放 主体 元 素 。 用 拿破仑 形象 代表 帝王 ,用 地 标 建 筑 代表 瘟 立 襄 峰 ,傲视 群 城 。 
摆 放 元 素 要 注意 大 小 、 位 置 . 比 例 要 合适 , 主 元 素 造型 要 完整 ,做 到 整体 没有 缺失 。 

(5) 放置 广告 词 。 背 景 图 形 不 要 太 复 杂 , 广 告 词 的 背景 是 深 色 ,广告 词 就 用 浅 色 ,一 
般 的 广告 词 由 主 标题 .副标题 ,说明 文字 、 英 文 翻译 组 成 。 

(6) 色彩 调整 。 调 整 色调 的 指导 原则 是 基于 VI 色 .VI 色 决定 画面 的 色调 关系 , 确 
定 画 面 是 暖 调 还 是 冷 调 , 亮 调 还 是 暗 调 。 色 彩 冷暖 是 指 在 同一 色调 范围 内 色彩 关系 要 
有 冷暖 对 比 ,色彩 协调 指 色彩 在 对 比 的 基石 达到 统一 协调 均衡 。 效 果 如 图 10. 33 
所 示 。 


10.33 首页 设计 最 终 效 果 图 


本 章 小 结 


本 章 主 要 介绍 了 网 页 设计 的 基础 理论 。 包 括 : 


a 
(2) 
(3) 
(4) 


(1) 
(2) 
(3) 
(4) 


国 


平面 设计 基础 知识 : 图 像 类 型 .图 像 分 辩 率 、 图 像 文件 格式 、 图 像 设 计 的 分 类 等 。 
色彩 的 应 用 : 色彩 模式 、 网 页 配色 方案 。 

网 页 的 构图 : 构图 原理 及 构图 的 视觉 表现 形式 。 

以 房地产 网 站 首页 设计 为 例 ,详细 介绍 了 网 页 设计 的 流程 。 


练 习 题 


图 像 类 型 有 哪 几 种 ?各 有 什么 特点 ? 

图 像 模式 有 哪 几 种 ? 说 出 其 具体 的 用 途 。 

什么 是 图 像 分 辩 率 ? 网 页 图 像 分 状 率 一 般 是 多 少 ? 
请 简 述 网 页 设计 的 工作 流程 。 


上 机 实验 


实验 要 求 


设计 一 个 具有 特定 风格 的 企业 网 站 。 分 析 企 业 的 特点 : 包括 面 对 的 客户 群体 、 提 供 
的 服务 等 ;确定 网 站 类 型 ;构思 网 页 ;确定 配色 方案 ;收集 素材 ;确定 网 页 构图 ;设计 网 站 的 
首页 草图 。 


本 章 所 学 的 网 页 设计 基础 理论 ,如 色彩 的 应 用 、 网 页 的 构图 、 网 页 设计 的 工作 流程 等 内 容 。 
3. 实验 准备 工作 


保证 Internet 网 络 畅通 。 


4. 课时 安排 


上 机 实验 安排 4 课时 。 


5. 实验 指导 


网 站 设计 方案 的 确定 : 可 根据 下 面 推 荐 的 主题 选择 网 站 主题 或 自 定义 一 个 网 站 主 
题 ,如 表 10. 1 所 示 。 


表 10.1 推荐 网 站 主题 


综合 门户 娱乐 游戏 卡通 漫画 网 络 数码 建筑 装饰 
美容 时 尚 手机 通信 学 校 教育 生活 购物 服饰 品牌 
医疗 保健 食品 饮料 文化 艺术 金融 财经 休闲 体育 
交友 社区 公司 展示 个 性 展示 儿童 宠物 汽车 品牌 
影视 音乐 风景 旅游 


具体 操作 由 学 生 自 由 发 挥 ,此 处 略 。 


本 章 详细 介绍 了 如 何 利用 Fireworks 软件 进行 图 像 处 理 和 网 页 页 面 的 设计 。 
【本 章 学 习 目 标 】 


。 了 解 Fireworks 软件 工具 的 操作 方法 ; 

。 掌握 使 用 Fireworks 工具 设计 网 站 的 首页 .栏目 页 、 内 容 页 的 平面 效果 图 ;， 
。 掌握 设计 网 页 的 GIF 动画 的 方法 ; 

。 掌握 设计 网 页 的 交互 效果 ,如 按钮 .交互 图 像 等 的 方法 ; 

。 掌握 将 图 像 切割 .导出 为 网 页 的 方法 。 


11.1 Fireworks CS5 简介 


Fireworks 是 一 款 专 为 网 络 图 形 设计 而 开发 的 图 形 编辑 软件 , 它 大 大 简化 了 网 络 图 
形 设计 的 工作 难度 。 使 用 Fireworks 既 可 以 设计 静态 图 像 ,也 可 以 轻松 地 制作 出 十 分 动 
感 的 GIF 动画 ,还 可 以 轻易 地 完成 大 图 切割 ,动态 按钮 .动态 翻转 图 等 操作 。 借 助 于 
Fireworks CS5 ,用户 可 以 在 直观 、 可 定制 的 环境 中 创建 和 优化 用 于 网 页 的 图 像 并 进行 精 
确 控制 。Fireworks 的 优化 工具 可 帮助 在 最 佳 图 像 品 质 和 最 小 压缩 大 小 之 间 达 到 平衡 。 
它 与 Dreamweaver 和 Flash 共同 构成 的 集成 工作 流程 可 以 完美 地 完成 创建 并 优化 图 像 
的 工作 。 利 用 可 视 化 工具 ,无 须 学 习 代 码 即 可 创建 具有 专业 品质 的 网 页 图 形 和 动画 ,如 变 
换 图 像 和 弹出 菜单 等 。 

Fireworks 可 创建 和 编辑 矢量 图 形 与 位 图 图 像 ,并 可 导入 和 编辑 Photoshop 和 
Illustrator 文件 。Fireworks 源 文件 格式 为 PNG, 可 以 保存 图 层 、 图 像 特效 .图 像 切 片 等 
相应 的 信息 。 在 Fireworks 中 编辑 完成 的 文件 , 若 需 在 网 页 设计 中 使 用 ,可 将 它 输 出 为 
HTML 文件 。 

在 图 像 插 入 到 网 页 之 前 ,一 般 需 要 将 图 像 进行 处 理 。 在 Fireworks 中 处 理 网 页 图 像 
一 般 遵 循 以 下 步 又: 创建 图 形 和 图 像 一 创建 Web 对 象 一 优化 图 像 一 导出 图 像 。 


1. 创建 图 形 图 像 
Fireworks 可 以 在 两 种 模式 下 编辑 图 像 文档 ,一 是 在 矢量 图 模式 下 绘制 和 编辑 图 形 
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路 径 ;二 是 在 位 图 模式 下 编辑 像素 点 。Fireworks 工具 箱 面板 是 按 矢量 工具 和 位 图 工具 
进行 分 组 的 。 


2. 创建 Web 对 象 


Web 对 象 是 在 网 页 交互 中 使 用 到 的 一 些 基 本 的 操作 对 象 , 主 要 包括 切片 和 热点 区 。 
切片 是 将 一 幅 完 整 的 图 像 切割 成 不 同 的 切片 对 象 ,并 能 在 这 些 切 片上 添加 动作 动画 或 超 
链接 等 。 可 对 不 同 的 切片 对 象 设置 不 同 的 属性 ,比如 不 同 的 图 像 格 式 等 。 而 热点 区 是 指 
在 一 幅 图 像 上 可 设置 不 同 的 超 链接 响应 区 域 。 


3. 优化 图 像 


为 了 保证 图 像 在 网 页 中 可 快速 下 载 , 可 以 优化 图 像 , 在 保证 图 像 品质 的 前 提 下 获得 较 
小 的 图 像 文档 。 可 以 采用 减少 图 像 的 色彩 数量 、 降 低 图 像 的 品质 ,将 大 的 图 像 通 过 切割 变 
成 小 的 图 像 ,并 对 不 同 的 切片 进行 优化 处 理 等 方法 来 减 小 图 像 的 大 小 。 


4. 导出 图 像 


完成 图 像 优化 后 ,按照 一 定格 式 导 出 图 像 ,导出 的 图 像 可 以 直接 应 用 于 网 页 。 
Fireworks 图 像 源 文件 将 以 PNG 格式 保存 。 也 可 根据 不 同 的 应 用 需要 将 图 像 导 出 相应 
的 格式 。 


11.2 Fireworks CS5 的 工作 界面 


Fireworks CS5 的 工作 界面 由 5 个 部 分 组 成 , 即 菜单 栏 . 文 档 窗口 .工具 箱 面板 “ 属 
性 ?面板 .工作 面板 组 ,如 图 11. 1 所 示 。 


工作 
面板 组 


图 11.1 Fireworks 的 工作 界面 
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1. 文档 窗口 


文档 窗口 是 工作 界面 中 的 主要 部 分 ,用 来 显示 所 编辑 的 对 象 , 在 文档 窗口 上 方 有 4 个 
标签 ,分别 为 "原始 >"“ 预 览 "“2 幅 ”“4 幅 ”, 其 中 “2 幅 ”“4 幅 ?分 别 显 示 不 同 压缩 比率 下 


的 图 像 与 原始 图 像 的 比较 。 

在 文档 窗口 下 方 是 状态 栏 ,显示 当前 文档 的 大 小 及 显示 的 比例 。 状 态 栏 左 侧 的 动画 
按钮 可 控制 动画 图 像 的 显示 。 

2. 菜单 栏 


菜单 栏 提供 了 程序 功能 的 命令 菜单 ,可 以 通过 菜单 栏 中 的 命令 完成 某 项 特定 操作 。 
3.“ 属 性 ”面板 

“属性 ”面板 显示 当前 选中 对 象 的 属性 以 及 当前 工具 属性 或 文档 属性 。 

4. 工作 面板 组 


Fireworks 的 工作 面板 组 包括 有 图 层 、 状 态 、 颜 色 混 合 、 行 为 和 优化 等 。 单 击 “ 窗 口 ” 
菜单 ,选择 相应 的 命令 便 可 打开 或 关闭 各 种 面板 。 


5. 工具 箱 面 板 
工具 箱 面板 放置 了 可 供 编辑 图 形 图 像 和 文本 的 各 种 工具 ,利用 这 些 工具 ,用 户 可 以 方 
便 地 进行 绘图 ,修改 ,移动 .缩放 及 编排 对 象 等 操作 。 
11.3 制作 静态 图 像 


11.3.1 位 图 图 像 处 理 


在 网 页 中 大 量 使 用 的 是 位 图 图 像 。 下 面 以 实现 如 图 11. 2 所 示 效 果 为 例 来 介绍 位 图 
图 像 的 相关 操作 。 


Fireworks 的 工具 箱 提供 了 丰富 的 处 理 位 图 图 
像 的 工具 ,能 够 实现 选取 、 裁 前 、 绘 制 、 变 形 、 修 饰 位 
图 图 像 的 功能 ,如 图 11. 3 所 示 。 

【 例 11.1】 位 图 效果 图 的 制作 。 具 体操 作 步 
又 如 下 。 

(1) 新 建文 档 。 选 择 “ 文 件 " 菜 单一 “新 建 " 命 令 ， 
或 单 击 Fireworks 启动 界面 中 的 “新 建 " 选 项 组 一 
“Fireworks 文档 ”, 如 图 11.4 所 示 。 弹 出 “新 建文 
档 ? 对 话 框 , 输 入 “画布 大 小 ?参数 “宽度 ?为 600 像 


11.2 位 图 效果 实例 
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素 ,“ 高 度 ” 为 400 像素 “分 辩 率 "为 72 像素 /英寸 (1 英寸 一 2. 54 厘米 ,下 同 ) ,这 是 网 页 中 
图 像 常 用 的 分 辩 率 大 小 ,选择 “画布 颜色 ”为 白色 ,如 图 11.5 所 示 。 


指针 /选择 后 方 Ea 
对 象 NR. 一 部 分 选 定 滴 管 一 [一 油漆 桶 
缩放 / 俩 斜 /扭曲 汪汪 一 裁 前 /导出 区 域 铅笔 笔触 颜色 一 目击 吧 | 
没有 描 边 或 填充 一 油漆 栖 填 充 颜色 
矩形 /椭圆 选取 硬 直 一 套 索 / 多 边 形 套 索 设置 默认 [一 交换 笔触 /填充 色 
魔术 棒 _ 上 ml 了 笔触 填充 色 带 菜单 的 全 屏 模式 
和 -上 委 放 撞 snana 标准 屏幕 模式 Es 重工 
/ 锐 化 / 减 洲 F 形 工具 1 
提要 各 人 减 淡 四 手 形 工具 缩放 工具 


图 11.3 位 图 处 理工 具 


打开 最 和 近 的 项 目 新 建 
[= 惫 mmoox PNG) 
笨 基干 模 株 的 文 格 (PNG) 
扩展 
i 
国 wa 和 Nn» 
国 weme 。 Fw 
国 xs， 
口 a 
图 11.4 Fireworks 启动 界面 
ETE 所 
-画布 大 小 : 937. 5K 
宽度 外: oo 像素 可 页 : so 
高 度 n: [oo 像素 可 高 : 4o0 
分 状 车 虽 : 『z 像素 /英寸 可 


图 11.5 “新 建文 档 " 对 话 框 


(2)“ 选 取 框 "工具 的 使 用 。 单 击 “ 选 取 框 ”工具 ,在 “属性 ”面板 中 的 “样式 ”下 拉 列 表 
中 选择 “正常 "选项 ,“ 边 缘 ” 为 “ 实 边 ”, 如 图 11.6 所 示 , 以 画布 的 最 左 方 、 最 上 方 为 起 点 , 拖 
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搜 鼠 标 左 键 ,在 画布 上 绘制 一 个 选取 和 矩形 框 ,将 光标 移动 至 最 右 方 .最 下 方 释放 , 即 选 中 了 


整个 画布 。 
3 后 性 
[Ae" I 样式 :正常 司 ji 过 :Fi 司 避 到 
a ml 万 动车 计 了 权 
Re 
高 [Ww | 


11.6 “选取 框 "工具 的 属性 设置 


(3)“ 浙 变 ” 工 具 的 使 用 。 单 击 “ 渐 变 ” 工 具 , 在 “属性 ”面板 中 ,设置 渐变 颜色 为 由 深 绿 色 
( 间 006600) 到 白色 (FFFFFF), 按 住 鼠 标 左 键 , 沿 垂直 方向 拖 动 鼠 标 填充 渐变 颜色 ,如 
图 11.7 所 示 , 按 组 合 键 Ctrl 十 D 取消 选择 。 注 意 :“ 油 漆 桶 ?工具 是 填充 单一 颜色 时 使 用 的 。 


图 11.7 “渐变 "工具 的 属性 设置 


(4)“ 魔 术 棒 ”工具 的 使 用 。 打 开 位 图 文件 apple. jpg。 由 于 此 图 像 较 大 , 单 击 “修改 ” 
菜单 一 “画布 >“ 图 像 大 小 ”命令 ,将 图 像 分 辨 率 改 为 72 像素 /英寸 ,成 比例 地 缩小 图 像 的 
尺寸 至 300X220( 像 素 ) 。 

(5)“ 魔 术 棒 ? 工 具 的 使 用 。 位 图 背景 为 白色 ,如 何 去 除 图 像 中 白色 的 背景 图 ,使 得 图 
像 与 第 (3) 步 所 设置 的 渐变 背景 相 融 合 ? 单 击 “ 魔 术 棒 ” 工 具 , 在 “属性 ”面板 中 设置 容 差 为 
32( 容 差 值 越 大 ,选择 的 范围 越 广 ) ,选中 “动态 选取 框 " 复 选 框 ,边缘 为 * 实 边 ”, 如 图 11. 8 
所 示 。 在 图 像 白色 背景 处 单 击 , 即 选中 白色 色 值 的 范围 。 单 击 “ 选 择 ” 菜 单 ~“ 反 选 ” 按 钮 
即 选 中 电脑 。 再 单 击 “ 选 择 ” 菜 单一 “羽化 ”命令 .将 羽化 半径 设 为 5 像素 ,复制 选中 的 图 
像 ,将 其 粘贴 至 第 (3) 步 所 建 的 画布 中 。 
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图 11.8 “魔术 棒 " 工 具 的 使 用 
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(6) 滤 镜 效果 的 使 用 。 用 “指针 ”工具 单 击 电 脑 图 像 , 在 “属性 ”面板 中 , 单 击 滤 镜 ” 右 
侧 的 “十 ”号 按钮 ,在 弹出 的 菜单 中 .选择 “阴影 与 光 举 ”一 “光泽 ”命令 ,如 图 11.9(a) 所 示 ， 
在 弹出 的 对 话 框 中 设置 参数 ,宽度 为 9, 颜色 为 白色 (并 FFFFFF) ,不 透明 度 为 65%, 柔 化 
为 11 , 偏 移 为 0, 如 图 11. 9Cb) 所 示 。 
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(a)“ 滤 镜 效果 "的 使 用 (b) 发 光 效果 参数 的 选择 
图 11.9 使 用 滤 镜 效果 


让 用 


(7) 克隆 图 像 。 选 择 “ 编 辑 ” 菜 单一 “克隆 ”命令 克隆 图 像 。 选 中 图 像 单 击 “ 缩 放 ” 芽 
具 , 按 下 Shift 键 单 击 并 拖 动 鼠标 ,成 比例 地 缩小 图 像 , 如 图 11. 10 所 示 。 再 克隆 一 个 图 
像 ,用 “指针 ?工具 移动 图 像 分 布 在 画布 的 不 同位 置 。 
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图 11.10 缩放 工具 的 使 用 


(8) 修改 图 像 的 不 透明 度 。 单 击 缩小 后 的 电脑 图 像 ,在 “属性 ?面板 中 单 击 “不 透明 
度 ”, 单 击 左 侧 下 拉 箭头 拖 动 滑 块 改变 不 透明 度 的 值 为 30, 如 图 11. 11 所 示 。 

(9) 水 平 翻转 。 单 击 另 一 幅 小 的 电脑 图 像 , 选 择 “ 修 改 ”" 菜 单一 “变形 ”一 “水 平 翻转 ” 
命令 ,如 图 11. 12 所 示 。 
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图 11.11 设置 图 像 不 透明 度 图 11.12 设置 图 像 水 平 翻转 


(10) 导入 外 部 图 像 。 选 择 * 文 件 " 菜 单一 “导入 ”命令 ,在 "导入" 对话 框 中 ,选择 
flower. jpg 图 像 , 单 击 “ 打 开 ” 按 钮 。 在 画布 中 导入 图 像 有 以 下 两 种 方法 。 

方法 一 ”在 画布 指定 位 置 直接 单 击 , 将 图 像 文 件 按 100% 比 例 导 入 到 画布 。 

方法 二 ”预先 在 画布 中 单 击 并 拖 动 鼠标 ,绘制 一 个 固定 大 小 的 矩形 块 ,图 像 文件 按 比 
例 缩放 导入 到 画布 中 。 

此 处 采用 的 是 方法 二 ,导入 一 幅 花卉 位 图 flower. jpg。 

(11)“ 套 索 ? 工 具 的 使 用 。 单 击 * 套 索 ? 工 具 , 在 “属性 ?面板 中 ,设置 “边缘 ?为 羽化 ， 
“ 值 ”为 10 , 单 击 并 拖 动 鼠标 沿 花 卉 边缘 移动 “ 套 索 ?工具 ,最 后 回 到 起 点 , 松 开 鼠 标 左 键 即 
选中 花卉 ,选择 “选择 ?菜单 "反选 "命令 , 按 Del 键 删除 花卉 原 背 景 。 


(12) 单 击 花 弄 。 在 “属性 ”面板 中 , 单 击 “ 湛 镜 ” CC 
i 侧 的 “十 "号 按钮 ,在 弹出 的 菜单 中 选择 “模糊 ”~ 
有 有 侧 的 “二” 号 按 包 ,在 弹出 的 床单 中 选择 " 模 提 Et 
“缩放 模糊 "按钮 ,在 弹出 的 “缩放 模糊 "对 话 框 中 设 a -二 一 
置 参数 “数量 "为 30,“ 品 质 ? 为 50, 如 图 11. 13 


所 示 。 i 图 11.13 缩放 模糊 效果 
(13) 输入 文本 。 单 击 “ 文 本 ”工具 |A ,在 “属性 ” 


面板 中 设置 字体 .字体 样式 .字体 大 小 .字体 颜色 .平滑 消除 锯齿 等 , 单 击 画布 某 处 ,输入 文 
本 ,如 图 11. 14 所 示 。 用 “指针 ”工具 单 击 文本 对 象 .在 “属性 "面板 中 ,选择 “ 滤 镜 ”效果 一 
“阴影 和 光量 ?一 投影 ”命令 ,参数 值 分 别 如 下 : 距离 为 3, 不 透明 度 为 65. 柔 化 值 为 4, 偏 
移 角 度 为 315。 
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图 10.14 文本 工具 的 使 用 


(14) 导出 图 像 。 图 像 效 果 图 制作 完成 后 ,打开 “优化 ”面板 ,在 “优化 ”面板 中 对 图 像 


进行 优化 ,图 像 “ 格 式 ” 选 择 为 JPEG,“ 品 质 ” 选 择 为 60, 然 后 选择 


文件 ?菜单 一 导出 ? 命 


令 ,或 在 “优化 ”面板 中 不 进行 任何 设置 ,直接 选择 “文件 "菜单 一 “图 像 预览 ”命令 ,弹出 “图 
像 预览 ”对 话 框 ,在 此 设置 相应 的 参数 ,如 图 11. 15 所 示 , 单 击 “ 导 出 ”按钮 ,弹出 “导出 ”对 


话 框 ,保存 文件 ,制作 完成 。 
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图 11.15 图 像 预览 


11.3.2 ”绘制 和 编辑 矢量 对 象 


绘制 如 图 11. 16 所 示 的 “标志 集锦 ”矢量 图 例 。 
矢量 图 是 基于 路 径 来 绘制 的 。 与 使 用 一 行 行 像素 来 构成 马赛 
矢量 对 象 使 用 线条 ,可 以 说 是 对 线条 的 描述 。 


1. 矢量 工具 的 使 用 


矢量 工具 如 图 11. 17 所 示 。 


克 式 图 像 的 位 图 不 同 ， 
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11.16 矢量 绘图 实例 : 标志 集锦 图 11.17 矢量 工具 


1) 绘制 基本 图 形 

绘制 直线 、 和 矩形、 椭圆 、 多 边 形 、 星 形 等 矢量 图 。 

(1)“ 直 线 ? 工 具 : 按 下 Shift 键 并 拖 动 鼠标 ,可 以 绘制 水 平 、 垂 直 或 45 夹 角 的 直线 。 

(2)“ 和 矩形 ”工具 或 “椭圆 ?工具 : 按 下 Shift 键 并 拖 动 鼠标 以 光标 所 在 点 为 起 始点 绘 
制 正 方形 或 圆 形 , 按 下 Alt 键 ,以 光标 所 在 点 为 中 心 开始 绘制 矩形 或 椭圆 。 

(3)“ 多 边 形 " 工 具 : 绘制 的 形状 可 分 为 多 边 形 和 星 形 ,在 “属性 ”面板 中 可 设置 多 边 
形 形 状 、 边 数 及 角度 设置 项 。 

(4)“ 钢 笔 ? 工 具 : 直接 单 击 可 绘制 由 直线 组 成 的 折线 ;在 测绘 点 单 击 并 拖 动 鼠 标 ,可 
绘制 贝 赛 尔 曲线 ,可 用 “部 分 选取 ”工具 调节 曲线 上 的 控制 杆 的 方向 和 长 度 来 调节 曲线 的 
曲率 ,如 图 11. 18 所 示 。 


NR 


图 11.18 使 用 “钢笔 ”工具 绘制 线条 


2) 绘制 矢量 图 形 
Fireworks 提供 了 一 组 “矢量 图 形 ” 工 具 , 可 以 绘制 更 为 复杂 的 几何 图 形 , 如 图 11. 19 所 示 。 
【 例 11.2】〗 日 本 丰田 汽车 标志 的 绘制 ,如 图 11. 20 所 示 ,操作 步骤 如 下 。 
n| 
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图 11.19 矢量 图 形 工具 图 10.20 丰田 汽车 标志 的 绘制 过 程 
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(1) 新 建 一 个 文档 ,大 小 为 400X300( 像 素 ) ,选择 “视图 ?菜单 标尺 ”辅助 线 ” 一 
“显示 辅助 线 ” 命 令 , 将 光标 指向 水 平 标尺 处 单 击 并 向 下 拖 动 至 画布 中 间 位 置 ,再 将 光标 指 
向 垂直 标尺 处 单 击 并 拖 动 到 画布 中 间 位 置 , 使 得 两 条 辅助 线 相交 于 一 点 。 

(2) 单 击 “矢量 图 形 ” 工 具 组 一 “ 面 圈 形 ”工具 , 单 击 并 拖 动 鼠 标 ,绘制 一 个 圆 环 , 拖 动 
内 径 控制 点 调节 圆 环 的 内 径 , 如 图 11. 20(a) 所 示 。 

(3) 单 击 “缩放 ?工具 , 拖 动 图 形 右 侧 的 控制 点 ,使 正 圆 环 变形 为 椭圆 环 ,并 将 圆 环 圆 
心 置 于 画布 两 条 辅助 线 交 点 处 ,如 图 11. 20(b) 所 示 。 

(4) 克隆 圆 环 , 单 击 “ 缩 放 ” 工 具 ,缩小 圆 环 ,使 小 圆 环 上 半 部 分 圆 弧 与 大 圆 弧 重合 ,如 
图 11. 20(c) 所 示 。 

(5) 克隆 小 圆 环 , 选 择 “ 修 改 ” 菜 单一“ 变形 "一 “旋转 90" 顺 时 针 ” 命 令 , 单 击 “ 缩 放 ” 工 
具 调 节 圆 环 大 小 ,如 图 11. 20(d) 所 示 。 操 作 完 成 。 

2.“ 自 动 形状 ”面板 

选择 “窗口 "菜单 一“ 自动 形状 ”命令 ,打开 “自动 形状 ”面板 ,“ 自 动 形 状 ” 面 板 中 有 一 些 
预 设 的 图 形 可 备 调用 。 单 击 某 个 图 形 并 将 其 拖 动 至 画布 上 ,再 通过 单 击 或 拖 动 控制 柄 来 
调节 图 形 的 相关 属性 ,如 图 11. 21 所 示 。 


图 11.21 “自动 形状 ”面板 


3. 编辑 路 径 


可 对 已 绘制 好 的 路 径 进行 修改 ,例如 修改 曲率 、 增 删节 点 或 切割 路 径 等 。 

1)“ 部 分 选取 ”工具 的 使 用 

单 击 “ 部 分 选取 ”工具 , 拖 动 路 径 的 节点 ,改变 节点 的 位 置 和 路 径 的 曲率 , 单 击 某 一 控 
制 点 , 按 Del 键 删除 该 点 。 

2)“ 钢 笔 ”工具 的 使 用 

单 击 “钢笔 ?工具 ,靠近 当前 选中 的 路 径 时 可 增加 或 删除 节点 , 当 “ 钢 笔 ” 工 具 置 于 路 径 
上 时 ,指针 旁 出 现 一 个 “十 "号 的 标识 , 单 击 可 增加 节点 ; 当 指 针 置 于 节点 上 时 ,出 现 “ 一 ”号 
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的 标志 , 单 击 可 删除 该 节点 。 

3)“ 刀 子 ” 工 具 的 使 用 

单 击 “刀子 工具 切割 路 径 , 用 “刀子 ?工具 画 一 条 穿 过 路 径 的 线 ,使 用 * 部 分 选取 ”工具 
选择 其 中 的 一 条 路 径 并 移动 ,就 会 发 现 原先 的 路 径 已 经 被 切割 。 

【 例 11.3】 雪铁龙 汽车 标志 的 绘制 ,如 图 11. 22 所 示 。 具 体操 作 步 又 如 下 。 
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图 11.22 雪铁龙 汽车 标志 的 制作 


(1) 新 建 一 个 文档 ,大 小 为 200 X200( 像 素 ) , 单 击 * 和 矩形 ?工具 ,在 “属性 ?面板 中 设置 
填充 颜色 为 红色 , 按 下 Shift 键 ,绘制 一 个 正方 形 。 

(2) 单 击 “ 多 边 形 ” 工 具 . 在 “属性 ”面板 中 设置 填充 颜色 为 白色 ,选择 “ 边 ” 为 3, 选 中 
“自动 " 复 选 框 , 即 自 动 调节 锐 度 ,绘制 一 个 三 角形 。 

(3) 单 击 “ 钢 笔 ” 工 具 ,将 鼠标 指针 移 到 至 三 角形 下 边 中 间 位 置 ,指针 处 出 现 一 个 “十 ” 
号 , 单 击 即 添加 了 一 个 节点 。 

(4) 单 击 “ 部 分 选取 ”工具 , 单 击 下 边 中 间 节 点 并 拖 动 鼠 标 ,将 其 向 上 移动 。 

(5) 选中 三 角形 变化 后 的 图 形 ,选择 “编辑 "菜单 一 “克隆 ”命令 ,然后 用 “指针 ”工具 向 
下 移动 克隆 的 三 角形 ,调整 两 个 相同 图 形 的 位 置 。 

(6) 选中 下 方 的 正方 形 . 在 “属性 ”面板 中 单 击 滤 镜 ” 右 侧 "十 ”号 按钮 ,选择 “阴影 和 
光 尝 ”一 “投影 ”命令 ,在 弹出 的 对 话 框 中 设置 参数 值 如 下 : 距离 为 8, 颜色 为 黑色 
〈# 000000) ,不 透明 度 为 65% ,和 柔 化 值 为 4, 偏 移 角 度 为 315。 

(7) 选中 三 个 图 形 ,选择 “窗口 ?菜单 对齐? 命令 ,选择 垂直 对 齐 ,操作 完成 。 


4. 组 合 和 组 合 路 径 


1) 组 合 

选择 “修改 "菜单 ~" 组合 ”命令 ,多 个 矢量 对 象 将 组 合 为 一 个 矢量 对 象 ,每 个 矢量 对 象 
保持 原 有 属性 ,选择 “取消 组 合 "命令 ,恢复 为 多 个 矢量 对 象 。 

2) 组 合 路 径 

对 多 个 矢量 图 形 路 径 采 用 逻辑 运算 方法 组 合 为 一 个 复杂 的 路 径 。 选 择 “ 修 改 ” 菜 单一 
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“组 合 路 径 ? 组 中 的 某 一 项 命令 ,如 图 11. 23 所 示 。 


组 合 接合 联合 交集 


入 
图 11.23 组 合 和 组 合 路 径 


(1) 接合 : 将 多 个 矢量 对 象 合并 为 一 个 路 径 ,将 其 中 重合 的 路 径 部 分 不 填充 ,透明 
处 理 。 

(2) 联合 : 将 多 个 矢量 对 象 合并 为 一 个 对 象 ,将 其 中 重合 的 路 径 部 分 完全 融合 ,只 剩 
下 最 外 部 的 轮廓 。 

(3) 交集 : 将 多 个 矢量 对 象 的 共同 区 域 ( 即 相 交 部 分 ) 保 留 下 来 ,形成 一 个 新 的 路 径 。 

(4) 打 孔 : 删除 上 方 所 选 对 象 与 下 方 所 选 对 象 重 倒 部 分 。 

(5) 裁 切 : 使 用 最 上 面 的 路 径 去 修剪 下 面 的 路 径 ,新 的 路 径 应 用 下 面 的 对 象 属性 。 


5. 笔触 .填充 和 样式 


1) 笔触 

选中 矢量 对 象 , 在 “属性 ?面板 中 设置 笔触 属性 “属性 ?面板 中 包括 了 所 有 笔触 属性 的 
设置 ,如 笔触 类 别 、 名 称 颜色、 笔尖 形状 .粗细 ,边缘 柔和 度 及 纹理 填充 等 ,如 图 11. 24(a) 
所 示 。 

【 例 11.4】 彩色 线条 的 绘制 ,如 图 11. 24(b) 最 右 侧 的 图 形 所 示 ,操作 步 又 如 下 。 
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(a) 笔触 属性 的 设置 


人 < 一 


(b) 笔触 效果 
图 11.24 笔触 的 应 用 


单 击 “ 钢 笔 ” 工 具 , 在 画布 上 绘制 一 条 曲线 ,选择 “修改 ”菜单 一 “改变 路 径 " 一 “扩展 笔 
触 " 命 令 , 弹 出 “展开 笔触 "对话 框 .设置 宽度 为 10, 单 击 “ 确 定 ” 按 钮 ,在 “属性 ”面板 中 选择 
“填充 ”类 别 为 “线性 渐变 ” ,设置 预 置 为 “光谱 ”, 令 笔触 为 无 四 ,操作 完成 。 

2) 填充 

Fireworks 中 的 填充 操作 包括 实心 .渐变 色 、 图 案 填 充 等 ,如 图 11. 25(a) 所 示 。 选 中 
需 填充 的 矢量 对 象 ,在 “属性 ?面板 中 设置 填充 类 别 边缘、 纹理 等 ,如 图 11. 25(b) 所 示 。 
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(b) 填充 属性 的 设置 
图 11.25 填充 的 应 用 


【 例 11.5】 填充 实例 ,操作 步骤 如 下 。 

(1) 新 建 一 个 文档 ,大 小 为 400X 300( 像 素 ) ,背景 色 设 为 白色 (#FFFFFF) , 单 击 “ 面 
圈 形 ”工具 ,在 画布 上 绘制 一 个 圆 环 , 拖 动 内 径 控制 点 左 移 , 扩 大 内 径 ,使 圆 环 变 成 一 个 圆 。 

(2) 单 击 外 控制 点 ,同时 按 下 Alt 键 , 圆 环 分 段 , 拖 动 控制 点 ,到 圆 的 某 个 位 置 释放 ， 
再 按 下 Alt 键 , 拖 动 控 制 点 ,到 圆 的 某 个 位 置 释放 ,此 时 把 圆 分 成 
三 段 。 单 击 * 部 分 选取 ”工具 ,选中 其 中 的 一 段 ,在 “属性 ?面板 中 ， 
设置 填充 颜色 为 实心 ,黄色 (#FFFF00)。 单 击 * 部 分 选取 ”工具 ， 
选中 另 一 段 ,设置 填充 为 图 案 “ 贝 伯 地 毯 ”。 再 单 击 * 部 分 选取 ” 工 
具 , 选 中 最 后 一 段 , 设 置 填充 类 别 为 “线性 渐变 ”, 选 择 预 置 中 的 绿 
色 (#00FF00) ,操作 完成 ,效果 如 图 11. 26 所 示 。 

对 于 渐变 填充 ,通过 渐变 调节 杆 可 调整 渐变 的 方向 ,操作 方法 为 : 用 “指针 ”工具 选中 
矢量 对 象 , 拖 动 调 节 杆 调节 渐变 的 范围 ,移动 调节 杆 的 位 置 ,改变 渐变 起 始点 ,效果 如 
图 11. 26 所 示 。 

3) 样式 

样式 是 笔触 、 填 充 ,效果 和 滤 镜 的 综合 。“ 样 式 ” 面 板 中 包含 了 一 些 预定 义 的 样式 。 用 
户 也 可 创建 自己 的 样式 。 选 择 “ 和 窗口" 菜单“ 样式 ”命令 ,打开 “样式 ”面板 ,选中 要 应 用 样 
式 的 对 象 , 单 击 “ 样 式 ” 面 板 中 的 某 个 样式 ,此 样式 即 应 用 于 当前 操作 对 象 。 


11.3.3 文本 应 用 


在 网 页 中 ,千篇一律 的 豆腐 块 文本 容易 使 人 感到 很 乏味 。 对 于 徽标 、 特 殊 标 题 以 及 其 
他 装饰 性 内 容 , 常 常 将 文本 做 成 图 形 , 可 起 到 画龙点睛 的 作用 ,如 图 11. 27 所 示 。 


图 11.26 调整 渐变 
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(a) (b) (9) 
图 11.27 ”特效 字 实例 


1. 输入 文本 


单 击 “ 文 本 ”工具 ,在 “属性 ”面板 中 ,设置 文本 的 属性 ,如 字体 、 字 号 .颜色 、 样 式 、 字 间 
距 、 行 间距 ,水 平 缩 放 、 基 线 调整 ,文本 的 对 齐 方式 、 消 除 锯齿 级 别 等 。 然 后 在 画布 上 单 击 ， 
输入 文本 ,如 图 11. 28 所 示 。 


图 11.28 设置 文本 属性 


2. 设置 效果 


文本 和 普通 的 矢量 对 象 一 样 ,可 进行 笔触 和 填充 的 设置 。 在 “属性 ?面板 中 , 单 击 “ 笔 
触 ” 或 “填充 ” 复 选 框 ,在 弹出 的 调 色 板 上 选择 颜色 ,在 调 色 板 中 , 单 击 " 填 充 选 项 ”或 “笔触 
选项 ”按钮 ,可 设置 更 为 复杂 的 填充 效果 或 笔触 效果 。 

【 例 11.6】 字体 的 填充 特效 及 滤 镜 的 应 用 .如 图 11. 27(a) 所 示 的 特效 字 “ 梦 想 ”, 操 
作 步 又 如 下 。 

(1) 单 击 “ 文 本 ”工具 ,在 “属性 ”面板 中 .设置 文本 的 大 小 为 120, 字 体 为 隶书 ,在 “消除 
锯齿 级 别 ” 下 拉 列 表 中 选择 “ 匀 边 消除 锯齿 ”, 选 中 “自动 调整 字 距 ” 复 选 框 , 单 击 “ 填 充 ” 选 
择 框 ,在 调 色 板 中 单 击 “ 填 充 选 项 ”按钮 ,选择 “渐变 ”一 “线性 渐变 ”选项 ,渐变 由 红色 
(#FF0000) 一 红色 一 黄色 (#FFFF00) 一 黄色 ,中间 红色 与 黄色 非常 接近 ,在 “文档 "窗口 
中 输入 文本 ,设置 渐变 调节 杆 呈 垂直 方向 ,如 图 11. 29 所 示 。 
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图 11.29 字体 的 填充 特效 设置 


(2) 在 “属性 ”面板 中 ,选择 * 滤 镜 ? 选 项 一 “阴影 和 光 旦 ?一 投 影 "命令 ,设置 参数 值 分 
别 如 下 : 距离 为 3, 柔 化 值 为 4, 不 透明 度 为 65%% , 偏 移 角 度 为 315 ,操作 完成 。 


3. 将 文本 附加 到 路 径 


为 了 使 文本 的 排列 更 加 灵活 ,Fireworks 提供 了 将 文本 附加 到 路 径 的 功能 。 

【 例 11.7】 制作 字体 环绕 路 径 的 特效 ,如 图 11. 27(b) 所 示 特 效 字 ,操作 步 又 如 下 。 

(1) 单 击 “ 文 本 ”工具 ,在 “属性 ”面板 中 ,设置 字体 大 小 为 40, 字 体 为 “Arial”,“ 填 充 ” 
选项 设置 为 线性 渐变 ,渐变 颜色 由 红色 (#FF0000) 到 黄色 (#FFFF00) ,在 文档 窗口 输入 
文本 ,设置 渐变 调节 杆 方向 为 水 平 。 

(2) 单 击 “ 椭 圆 ” 工 具 ,绘制 一 个 椭圆 ,选中 文本 和 椭圆 ,选择 “文本 ”菜单 一“ 附加 到 路 
径 ” 命 令 。 

(3) 克隆 文本 ,填充 颜色 为 深 灰 色 (# 333333) , 单 击 “指针 ?工具 ,选中 第 一 个 文本 , 单 
击 “ 倾 斜 ?工具 ,使 文本 倾斜 并 旋转 一 个 角度 。 再 选中 第 二 个 文本 , 单 击 “倾斜 "工具 ,使 文 
本 倾斜 并 旋转 ,移动 文本 的 位 置 ,操作 完成 。 

注意 : 如 果 要 分 离 路 径 与 文本 ,选择 “文本 ”菜单 “从 路 径 分 离 " 命 令 即 可 。 


4. 将 文本 转换 为 路 径 


为 了 使 文本 的 属性 像 矢量 对 象 一 样 灵活 多 变 ,可 将 文本 转换 为 路 径 。 但 此 时 文本 不 
再 具有 文本 的 特性 ,不 能 作为 文本 加 以 编辑 。 

【 例 11.8】 制作 特效 彩色 铁 空 字 如 图 11. 27(c) 所 示 实 例 , 操 作 步 又 如 下 。 

(1) 单 击 “文本 ?工具 ,在 “属性 ?面板 中 ,设置 字体 为 隶书 ,字体 大 小 为 150 ,填充 颜色 
为 黑色 (#000000) ,选中 “自动 调整 字 距 ? 复 选 框 ,选择 “ 匀 边 消除 锯齿 ”, 输 入 文本 。 


BD CO OO POSTS Ot | | 第 11 章 利用 Fireworks 设 计 网 页 界面 ] 《e> 


(2) 选择 “文本 ”菜单 一“ 转换 为 路 径 ” 命 令 , 将 填充 设 为 “无 ”, 描 边 设 为 “无 ”。 

(3) 单 击 “ 部 分 选 定 ” 工 具 ,选中 整个 已 转换 为 路 径 的 文本 ,选择 “修改 ”菜单 一 “改变 
路 径 ” 选 项 一 “扩展 笔触 "命令 ,设置 笔触 宽度 为 5, 在 “属性 ”面板 中 设置 填充 为 “线性 渐 
变 ”, 浙 变 预 置 选择 为 光谱 。 

(4) 在 “属性 ?面板 中 ,选择 * 滤 镜 ? 选 项 阴影 和 光量 "一 “投影 "命令 ,设置 参数 值 分 
别 如 下 : 距离 为 3, 柔 化 值 为 4, 不 透明 值 为 65%, 偏 移 角度 为 315 ,操作 完成 。 


11.3.4 图 层 


一 个 Fireworks 文档 中 可 以 包含 多 个 层 , 一 个 层 又 可 以 包含 许多 对 象 。 文 档 中 的 每 
一 个 对 象 都 属于 某 个 特定 的 层 。 用 户 可 以 创建 层 、 复 制 层 、 删 除 层 、 激 活 层 、 共 享 情 。 还 可 
对 层 或 包含 在 层 内 的 对 象 进行 如 下 操作 : 显示 /隐藏 /锁定 层 或 某 个 对 象 。 直 接 单 击 “ 图 
层 ” 面 板 下 方 的 某 个 按钮 ,如 图 11. 30(a) 所 示 , 或 单 击 “ 图 层面 板 右 侧 “ 选 项 ”按钮 也 |， 
弹出 下 拉 菜 单 中 选择 某 项 命令 ,如 图 11. 30(b) 所 示 。 


: 添加 蒙 版 


新 建屋 删除 
(a) “图 层 ” 面板 (b) “图 层 ” 面板 “选项 ”的 下 拉 菜 单 


图 11.30 层 


(1) 创建 层 : 单 击 “ 图 层 ” 面 板 右 上 方 的 “选项 ”按钮 ,从 下 拉 菜 单 中 选择 “新 建 层 " 命 
令 ,或 单 击 “ 图 层 ” 面 板 左 下 方 的 “新 建 层 ” 按 钮 。 

(2) 激活 层 : 直接 单 击 层 , 或 单 击 层 中 包含 的 对 象 , 层 以 高 亮 显示 。 

(3) 删除 层 : 首先 激活 层 , 单 击 “ 层 ”面板 下 方 的 “删除 ”按钮 ,或 单 击 “ 图 层面 板 右 上 
方 的 “选项 "按钮 ,从 下 拉 菜 单 中 选择 “删除 层 " 命 令 。 

(4) 复制 层 : 首先 激活 层 , 单 击 * 图 层 ?面板 的 “选项 按钮 ,从 下 拉 菜 单 中 选择 * 重 制 
层 " 命 令 。 


(5) 锁定 层 或 层 中 对 象 : 单 击 “ 图 层 ” 面 板 中 对 应 层 名 称 左 侧 的 第 二 列 方 格 ,显示 出 
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一 个 锁 的 标记 ,当前 层 或 对 象 即 被 锁定 ,不 可 再 编辑 .直到 再 次 单 击 解除 锁定 。 

(6) 显示 或 隐藏 层 或 层 中 对 象 : 单 击 “ 图 层 ” 面 板 对 应 层 名 称 左 侧 的 第 一 列 方 格 , 出 
现 一 个 眼睛 标记 ,表示 可 见 ,没有 此 标记 表示 不 可 见 。 

(7) 在 状态 中 共享 层 : 这 是 Fireworks 中 非常 重要 的 技术 ,设置 共享 层 后 ,在 层 中 对 
象 将 会 在 每 个 状态 都 显示 。 单 击 * 图 层 * 面 板 右上 方 的 “选项 "按钮 ,从 下 拉 菜 单 中 选择 “在 
状态 中 共享 层 " 命 令 。 


11.3.5 ” 蒙 版 


蒙 版 能 够 隐藏 或 显示 图 像 的 某 些 部 分 ,实现 各 种 特殊 效果 ,如 图 11. 31 所 示 实 例 。 


蒙 版 全 | 


(a) 文本 蒙 版 (b) 矢量 蒙 版 (0) 位 图 蒙 版 
图 11.31 蒙 版 效果 


1. 文本 蒙 版 


文本 蒙 版 其 实 就 是 将 图 像 和 文字 组 合 在 一 起 ,使 文字 中 包含 图 像 的 内 容 。 

【 例 11.9】 制作 文本 蒙 版 特效 如 图 11. 31(a) 所 示 ,操作 步骤 如 下 。 

(1) 选择 “文件 "菜单 ~“ 打开 ?命令 ,打开 一 幅 菊花 位 图 , 单 击 “ 文 本 ”工具 ,输入 文本 。 
单 击 “ 指 针 ? 工 具 , 调 整 文本 对 象 位 于 位 图 图 像 的 上 方 合适 的 位 置 。 

(2) 按 下 Shift 键 , 单 击 文本 与 位 图 图 像 , 同 时 选中 这 两 个 对 象 ,选择 “修改 ”菜单 一 
“ 蒙 版 ”选项 一 “组 合 为 蒙 版 ”命令 .操作 完成 。 


2. 矢量 蒙 版 


矢量 蒙 版 分 为 “路 径 轮 廓 "和 “ 灰 度 外 观 ” 两 种 类 型 。 

“路 径 轮廓 ?将 按照 蒙 版 对 象 的 路 径 区 域 来 显示 被 遮盖 的 对 象 。 而 当选 择 * 灰 度 外 观 ” 
蒙 版 类 型 时 ,被 蒙 对 象 的 清晰 度 就 会 受到 路 径 的 填充 色 和 描 边 色 的 深浅 影响 。 填 充 色 和 
描 边 颜色 都 为 灰 度 图 。 蒙 版 的 颜色 为 白色 , 则 蒙 版 下 的 图 像 能 够 清晰 显示 ; 蒙 版 的 填充 颜 
色 为 黑色 , 则 蒙 版 下 的 图 像 则 完全 透明 ; 蒙 版 的 填充 颜色 为 中 间 的 灰色 , 则 蒙 版 下 的 图 像 
将 以 半 透 明 状态 显示 。 

【 例 11.10】 制作 矢量 蒙 版 特效 如 图 11. 31(b) 所 示 , 此 例 中 还 巧 用 了 历史 记录 。 操 
作 步 骤 如 下 。 

(1) 打开 一 幅 美 女 位 图 , 单 击 “ 圆 角 和 矩形 工具 ,在 文档 窗口 中 绘制 一 个 圆 角 矩 形 , 尺 


寸 为 60X60( 像 素 ) ,填充 为 白色 ,无 笔触 。 

(2) 克 降 圆 角 矩形 ,水 平移 动 使 两 个 矩形 有 6 个 像素 间隔 ,打开 “历史 记录 ”面板 , 选 
中 最 后 两 个 步骤: 克隆 和 移动 , 单 击 “ 重 放 "按钮 多 次 。 

(3) 将 多 个 矩形 水 平 排列 ,并 将 其 全 部 选中 ,选择 “修改 "菜单 一 组合" 命令 ,或 按 下 
组 合 键 Ctrl 十 G, 克 隆 组 合 后 的 路 径 ,向 下 移动 6 个 像素 ,在 “历史 记录 ?面板 中 选中 最 后 
两 个 步骤: 克隆 和 移动 , 单 击 * 重 放 "? 按 钮 ,重复 单 击 。 最 后 选中 全 部 矩形 路 径 , 按 住 组 合 
键 Ctrl 十 G, 组 合 所 有 的 矢量 路 径 。 

(4) ei er 选择 “修改 ”菜单 一 “ 蒙 版 ”一 “组 合 为 蒙 版 "命令 ,在 
“属性 ”面板 中 设置 蒙 版 类 型 为 “路 径 轮 廓 ”, 操 作 完 成 。 


3. 位 图 莹 版 


位 图 蒙 版 以 蒙 版 对 象 中 的 像素 来 影响 被 蒙 对 象 的 可 视 区 域 ,与 Photoshop 中 的 图 层 
蒙 版 类 似 。 

【 例 11.11】 制作 位 图 蒙 版 特效 ,如 图 11. 31(c) 所 示 ,操作 步骤 如 下 。 

(1) 打开 一 幅 风 景 位 图 , 单 击 “ 图 层 ” 面 板 下 方 “添加 蒙 版 ”按钮 国 )。 

(2) 单 击 “ 渐 变 " 工 具 , 在 “属性 ?面板 中 ,选择 渐变 类 别 为 “放射 渐变 ”, 颜 色 渐变 设置 
为 由 白色 (#FFFFFF) 渐 变 为 黑色 (#000000) ,黑色 将 图 像 部 分 完全 遮盖 ,白色 为 图 像 部 
分 完全 显示 ,渐变 起 始点 在 图 像 的 中 心 向 外 辐射 ,实现 图 像 中 心 清楚 .外围 渐 隐 的 效果 。 

(3) 导入 一 幅 考 拉 位 图 , 单 击 “ 放 大 镜 ” 工 具 , 放 大 图 像 , 单 击 “ 套 索 ” 工 具 , 在 “属性 ” 面 
板 中 设置 羽化 值 为 10, 沿 着 小 考 拉 图 像 的 边缘 单 击 并 拖 动 鼠 标 ,选中 可 爱 的 小 考 拉 , 单 击 
图 层面 板 底 部 “添加 蒙 版 "按钮 回 ,将 选区 转换 为 蒙 版 ,两 幅 图 像 融 合 , 制 作 完成 。 


11.4 制作 动画 图 像 


网 页 中 不 仅 包含 大 量 的 静态 图 像 ,而 且 越 来 越 多 的 动画 及 动态 图 像 效 果 也 为 网 页 增 
色 不 少 。 本 节 着 重 介绍 利用 Fireworks 软件 制作 动画 ,如 图 11. 32 所 示 。 


(a) 逐 状态 动画 (b) 星球 轨道 动画 (c) 元 件 动画 
图 11.32 动画 实例 
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11.4.1 逐 状态 动画 


逐 状态 动画 实际 上 就 是 图 片 以 连续 状态 的 顺序 替换 从 而 造成 视觉 上 的 变化 。 

【 例 11.12】 制作 如 图 11. 32(a) 所 示 逐 状态 变化 的 荷花 动画 特效 ,操作 步骤 如 下 。 

(1) 选择 “文件 "菜单 “打开 ”命令 ,弹出 “打开 ”对 话 框 ,如 图 11. 33(a) 所 示 。 按 住 
Shift 键 ,连续 单 击 多 个 文件 ,或 按 Ctrl 键 选择 多 个 不 连续 的 文件 ,选中 对 话 框 下 方 的 “以 


动画 打开 ” 复 选 框 , 单 击 “ 打 开 ” 按 钮 。 
人 人 {人 和 人 一 
NO is 了 可 Go 
i wid Sitit eo 
Wn 时 so 
| Ei 图 wa 
全 热 点 雪村 
人 元 Hi 男 全 | 元 Hi 十 ee 亩 唱 悍 | 
二 长城 标志 WN ih 
a 时 sshmo (b) 修改 状态 的 停留 时 间 
wk | 
[| | 
Fm Ref 
| 4 
Xiu: [Fs7H | 
厂 打开 为 “未 全 各” 民 可 
F Ba 后 得 O00 QF 
(a) “以 动画 打开 "方式 打开 多 个 图 像 文件 (9 “优化 "面板 的 设置 


图 11.33 制作 荷花 实例 


(2) 单 击 “ 窗 口 ”菜单 一 “状态 ”命令 ,打开 “状态 ”面板 ,每 一 幅 图 像 都 分 散 地 放 在 各 个 
状态 中 。 选 中 多 个 状态 ,修改 状态 的 停留 时 间 , 即 “状态 延迟 ”的 值 ,单位 是 1/100 秒 , 如 
图 10. 33(b) 所 示 , 单 击 文档 窗口 状态 栏 中 的 “播放 ”按钮 可 预览 动画 效果 。 

(3) 单 击 “窗口 "菜单 一 “优化 "命令 ,打开 “优化 ”面板 ,选择 文件 格式 为 GIF 动画 ,还 
可 设置 背景 是 否 透明 、 颜 色 数 量 、 色 板 等 参数 ,如 图 11. 33(c) 所 示 。 

(4) 选择 “文件 "菜单 一 “导出 "命令 ,设置 文件 存储 路 径 和 文件 名 ,制作 完成 。 

【 例 11.13】 制作 卫星 环绕 地 球 的 动画 特效 ,如 图 11. 32 所 示 ,操作 步骤 如 下 。 

(1) 单 击 “ 椭 圆 ”工具 ,在 “属性 ”面板 中 设置 填充 颜色 为 “放射 状 ” 渐 变 ,颜色 由 白色 
( 闪 FFFFFF) 到 深蓝 色 (#000066) 渐 变 , 纹 理 为 “ 浮 油 ”, 纹 理 总 量 为 30% ,如 图 11. 34(a) 
所 示 。 按 下 Shift 键 ,绘制 一 个 正 圆 球体 ,如 图 11. 34(b) 所 示 。 

(2) 单 击 “ 椭 圆 ” 工 具 ,在 “属性 ”面板 中 ,选择 填充 为 “无 ”, 笔 触 为 “铅笔 且 有 1 像素 
柔 化 ,宽度 为 3, 颜色 为 灰色 (#999999) ,绘制 一 个 椭圆 轮廓 , 单 击 “ 倾 斜 "工具 使 椭圆 形变 
形 ,使 其 形状 类 似 围绕 星球 的 轨道 。 单 击 * 刀 子 " 工 具 . 将 椭圆 轮廓 分 割 成 两 部 分 ,在 “图 
层 ” 面 板 上 隐藏 图 层 ,将 椭圆 后 半 部 分 轮廓 置 于 球体 的 后 方 ,如 图 11. 34(c) 所 示 。 
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(a) 地 球 填充 设置 (b) 地 球 填充 效果 (0) 地 球 与 轨道 


3 01 其 态 1 7 © 
02 状态 2 7 © 
|o3 状态 3 7 © 
|04 状态 4 7 © 
|os 杖 太 5 7 © 
|o6 拓 杰 5 7 © 
07 状态 7 7 © 
|o 状态 8 7 © 
|% 状态 9 7 © 
(d) 设置 共享 层 (e) 重 制 状态 
图 11.34 制作 地 球 实例 
(3) 单 击 “ 椭 圆 " 工 具 , 在 “属性 ”面板 中 ,选择 填充 颜色 为 “放射 状 ” 渐 变 ,颜色 由 白色 


到 黑色 渐变 ,绘制 一 个 小 椭圆 。 将 小 椭圆 放 在 轨道 上 作为 卫星 。 

(4) 打开 “图 层 ” 面 板 , 将 星球 、 轨 道 放 在 一 个 层 中 ,将 此 层 设置 为 共享 层 并 命名 为 “地 
球 层 ”。 新 建 一 个 层 ,将 卫星 拖 入 到 此 层 中 ,将 其 命名 为 “卫星 层 ”。 此 层 在 共享 层 的 上 方 ， 
如 图 11. 34(d) 所 示 。 

(5) 打开 “状态 ”面板 , 单 击 右 侧 的 “选项 ”按钮 ,在 弹出 的 下 拉 菜 单 中 选择 “ 重 制 状态 ” 
命令 ,弹出 “ 重 制 状 态 ” 对 话 框 ,“ 数 量 " 选 择 为 8,“ 插 入 状态 ”选择 “在 当前 状态 之 后 ”, 单 击 
“确定 ”按钮 , 即 产 生 9 个 相同 的 状态 ,如 图 11. 34(e) 所 示 。 选 中 状态 2, 沿 轨道 移动 卫星 

- 段 距离 ,再 选中 状态 3, 再 移动 一 段 距离 ,以 此 类 推 设置 其 他 状态 卫星 的 所 在 位 置 。 

(6) 导出 为 “gif 动画 ”格式 。 


11.4.2 ”使 用 动画 元 件 创建 动画 


在 Fireworks 中 ,为 了 提高 动画 制作 效率 ,用 户 不 必 逐 状态 修改 画布 上 的 实例 ,而 只 
需要 设计 动画 变化 的 前 后 两 个 状态 ,中间 的 过 渡 变 化 可 以 由 Fireworks 自动 设置 。 此 时 
可 通过 对 元 件 的 操作 来 实现 。Fireworks 包括 有 3 种 元 件 类 型 , 即 图 形 ,动画 和 按钮 。 

【 例 11.14】 制作 大 树 底下 好 乘凉 的 动画 特效 ,如 图 11. 32(c) 所 示 ,操作 步骤 如 下 。 

(1) 打开 树 . gif 文件 , 单 击 “ 文 本 ”工具 .在 “属性 ”面板 中 ,设置 文本 颜色 为 绿色 ,字体 
大 小 为 30 像素 .字体 为 隶书 ,输入 文本 “大 树 底下 好 乘凉 ”, 单 击 “ 钢 笔 ” 工 具 ,绘制 半圆 弧 
曲线 ,选中 曲线 与 文本 ,选择 “文本 ”菜单 “附加 到 路 径 ” 命 令 。 

(2) 选中 文本 ,在 “属性 ?面板 , 单 击 “ 滤 镜 ? 选 项 “阴影 和 光量 ”一 “投影 ”命令 ,设置 
相应 的 参数 。 选 择 “ 文 本 ”菜单 ~“ 转 换 为 路 径 " 命 令 , 在 “属性 ”面板 中 ,设置 笔触 为 白色 ， 
宽度 为 2 像素 。 
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(3) 选中 文本 ,选择 “修改 "菜单 一 元 件 ? 选 项 -一 转换 为 元 件 ” 命 令 , 选 择 元 件 类 型 为 
“图 形 ”。 选 择 “ 修 改 ”" 菜 单一 “动画 ”选项 一 “选择 动画 ”命令 ,弹出 “动画 ”对 话 框 ,设置 相关 
的 参数 ,如 图 11. 35 所 示 。 

(4) 对 于 设置 好 的 动画 还 可 以 进行 再 编辑 ,用 “指针 ”工具 选中 文档 窗口 中 的 动画 实 
例 , 会 出 现 几 个 节点 ,绿色 是 动画 的 起 点 ,红色 为 动画 的 终点 ,可 调节 节点 的 方向 和 距离 ， 
如 图 11. 36 所 示 , 或 在 “属性 ”面板 中 修改 动画 的 相关 参数 。 
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图 11.35 设置 动画 属性 图 11.36 编辑 动画 


11.4.3 制作 精品 Banner 


在 网 页 中 的 广告 横幅 Banner 常常 采用 GIF 动画 。 利 用 Fireworks 的 动画 制作 功能 
完全 能 设计 出 精美 的 Banner。 

【 例 11.15】 制作 精美 的 Banner 动画 特效 ,如 图 11. 37 所 示 , 利 用 矢量 图 、 位 图 的 操 
作 技 巧 ,结合 动画 的 制作 方法 制作 精美 的 Banner 动画 。 操 作 步 又 如 下 。 


图 11.37 精美 Banner 


(1) 新 建 一 个 文档 ,画布 大 小 为 Banner 的 标准 大 小 468 X 60( 像 素 ) ,画布 颜色 为 白 
色 ,分 辩 率 为 72 像素 /英寸 。 

(2) 单 击 “和 矩形 ?工具 ,绘制 一 个 矩形 ,填充 颜色 为 橘红 色 ( 并 FF9900) , 单 击 * 刀 子 ? 工 
具 , 将 矩形 块 斜 切 一 刀 , 单 击 * 部 分 选取 ?工具 ,选中 右 侧 的 路 径 ,填充 为 黄色 (# FFFFo0) 。 

(3) 选择 “文件 ”菜单 一 “ 导 人 ”命令 ,导入 “intel 标志 . gif” 文 件 , 单 击 “ 缩 放 ” 工 具 , 改 
变 标志 图 像 大 小 ,移动 到 画布 最 右 侧 。 

(4) 再 导入 “长 城 标志 . gif” 文 件 , 单 击 “ 缩 放 ” 工 具 , 改 变 标志 图 像 大 小 ,移动 图 像 到 黄 
色色 块 的 位 置 ,并 添加 发 光 滤 镜 效果 ,如 图 11. 38(a) 所 示 。 

(5) 单 击 “ 钢 笔 ” 工 具 ,设置 颜色 为 #999900, 笔 尖 大 小 为 5,1 像素 柔 化 ,绘制 一 条 折 
线路 径 。 
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(a) 切割 矩形 条 ， 并 导入 intel 和 长 城 标识 


avail 攻 


(b) 绘制 两 个 色 块 之 间 的 折线 
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| 
(©) 新 建 共享 层 (d) 设置 动画 
图 11.38 制作 Banner 过 程 


(6) 单 击 “放大 镜 ? 工 具 , 放 大 图 形 , 单 击 * 部 分 选 定 "工具 ,选中 黄色 的 四 边 形 色 块 , 单 
击 “ 钢 笔 工 具 , 沿 着 上 一 步 绘制 折线 路 径 来 绘制 路 径 , 使 黄色 的 四 边 形 色 块 左 侧 路 径 呈 折 
线 。 同 理 , 选 中 橘红 色 四 边 形 色 块 , 单 击 “ 钢 笔 ” 工 具 , 沿 折线 路 径 绘制 路 径 , 使 橘红 色 的 四 
边 形 色 块 右 侧 路 径 呈 折线 ,两 条 折线 与 上 一 步 绘制 折线 重合 ,如 图 11. 38(b) 所 示 。 

(7) 单 击 “ 椭 圆 ” 工 具 绘 制 一 个 椭圆 ,填充 为 黄色 (#FFFF00), 单 击 “ 缩 放 ” 工 具 , 旋 转 
椭圆 。 选 择 “ 文 件 ” 菜 单一 “打开 ”命令 ,打开 “电脑 01. jpg” 文 件 ,选择 “修改 ”菜单 一 “ 夯 
布 ”选项 一 “图像 大 小 ”命令 ,修改 图 像 大 小 。 用 “魔术 棒 ” 工 具 ,选择 周围 白色 的 色 域 , 按 下 
Del 键 ,删除 白色 区 域 ,选择 “选择 ”菜单 一“ 反选 ”命令 ,羽化 2 像素 ,复制 图 形 , 回 到 
Banner 编辑 状态 ,粘贴 图 形 ,添加 “投影 ” 滤 镜 效果 。“ 电 脑 02. jpg” 处 理 方法 同上 。 

(8) 打开 “图 层 ” 面 板 , 单 击 “ 图 层 ” 面 板 右 侧 选项 ”按钮 ,在 下 拉 菜 单 中 选择 “新 建 层 ” 
命令 ,并 设置 此 层 为 “在 状态 之 间 共 享 ”, 如 图 11. 38(c) 所 示 。 将 橘红 色 和 黄色 多 边 形 、 折 
线 .intel 和 长 城 标志 拖 至 此 层 中 。 

(9) 单 击 “ 文 本 ”工具 ,输入 文本 “用 网 络 改变 我 们 的 生活 ”, 添 加 滤 镜 阴影 效果 。 选 中 
文本 ,选择 “修改 ”菜单 一“ 动画 ”选项 一 “选择 动画 ”命令 ,在 “动画 ”对 话 框 中 进行 设置 ,“ 状 
态 ” 选 择 为 *4”, 其 他 设置 如 图 11. 38(d) 所 示 , 打 开 “ 状 态 ” 面 板 ,双击 状态 的 停留 时 间 , 修 
改 第 1 状态 .第 2 状态 .第 3 状态 的 停留 时 间 为 “20”, 最 后 一 状态 的 停留 时 间 为 “100”。 

(10) 重 制 一 状态 ,此 时 为 第 5 状态 ,停留 时 间 为 *20”, 单 击 “ 文 本 ”工具 ,输入 文本 “ 拥 
有 良机 ,把 握 商 机 ”, 添 加 滤 镜 阴影 效果 。 选 择 “ 修 改 ” 菜 单一 “动画 ”选项 一 “选择 动画 ” 命 
令 , 打 开 “ 动 画 ” 对 话 框 进行 设置 ,设置 与 第 (9) 步 相似 。 

(11) 在 “状态 ”面板 中 ,分 别 单 击 第 1 状态 .第 2 状态 .第 3 状态 .第 4 状态 ,计算 机 图 
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像 显示 为 第 一 幅 图 像 的 第 5 状态 至 第 8 状态 ,计算 机 图 像 显示 为 第 二 幅 图 像 。 

(12) 单 击 文档 窗口 状态 栏 中 的 “播放 ”按钮 ,预览 动画 。 

(13) 选择 “文件 "菜单 一 “图 像 预 览 " 命 令 , 导 出 文件 格式 为 GIF 动画 , 调 色 板 设置 为 
精确 ,透明 效果 为 不 透明 ,设置 存储 路 径 和 文件 名 , 单 击 * 导 出 ?按钮 。 


11.5 制作 动态 交互 图 像 


在 网 页 中 ,浏览 者 通常 看 到 的 图 像 有 两 种 : 初始 状态 的 图 像 和 鼠标 经 过 状态 的 图 像 ， 
比如 按钮 .导航 条 、 弹 出 菜单 .翻转 图 像 等 动态 效果 。 本 节 主 要 介绍 如 何 利用 Fireworks 
制作 动态 交互 图 像 。 


11.5.1 切片 和 热点 的 应 用 
1. 使 用 切片 


为 了 获取 较 高 的 下 载 速 度 , 通 常 将 网 页 中 存在 的 较 大 图 像 切割 成 多 个 图 片 , 即 切片 。 
在 下 载 网 页 时 对 整 幅 图 像 的 下 载 转 变 为 对 多 幅 小 图 片 的 下 载 , 虽 然 图 像 大 小 没有 改变 ,但 
图 像 的 下 载 速度 会 明显 加 快 。 同 时 ,切片 还 是 建立 交互 响应 的 基础 ,利用 切片 可 以 制作 动 
态 交 互 图 像 。 切 片 的 形状 有 和 抢 形 .多 边 形 两 种 。 以 下 以 制作 多 边 形 切 片 为 例 进 行 讲解 。 
操作 步骤 如 下 。 

(1) 单 击 工 具 箱 中 “切片 ”工具 ,如 图 11.39(a) 所 示 ,在 文档 窗口 绘制 多 边 形 切 片 ,如 
图 11. 39(b) 所 示 。 多 边 形 切片 "工具 类 似 于 “钢笔 ?工具 ,在 图 像 上 单 击 一 次 就 会 产生 一 
个 节点 ,最 后 返回 到 最 初 节点 单 击 ,封闭 切片 区 域 。 创 建 的 切片 多 边 形 区 域 被 半 透 明 的 绿 
色 所 获 盖 ,如 图 11. 39(b) 所 示 。 
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图 11.39 切片 的 使 用 
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(2) 单 击 “ 指 针 ” 工 具 , 单 击 切片 区 域 .可 对 切片 进行 编辑 ,移动 切片 位 置 , 单 击 切片 的 
控制 点 可 改变 切片 的 大 小 。 

(3) 在 “属性 ”面板 中 可 为 切片 添加 链接 地 址 ,如 图 11. 39(c) 所 示 。 

(4) 切片 创建 完毕 ,还 需要 经 过 导出 才 可 以 在 网 页 中 使 用 。 打 开 “ 优 化 ”面板 ,选中 每 
个 切片 ,设置 切片 的 属性 ,然后 选择 “文件 "菜单 一 “导出 ”命令 ,弹出 “导出 ”对 话 框 ,输入 文 
件 名 ,导出 的 格式 选择 为 “HTML 和 图 像 ”, 选 中 “将 图 像 放 入 子 文件 夹 " 复 选 框 , 如 
图 11. 40 所 示 , 整 幅 图 像 即 以 排版 好 的 网 页 形式 导出 。 
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图 11.40 导出 切片 


2. 使 用 热点 


热点 通常 用 来 建立 图 像 映 射 。 所 谓 图 像 映射 ,就 是 在 一 幅 图 像 中 创建 多 个 链接 区 域 ， 
通过 单 击 不 同 的 链接 区 域 ,可 以 跳 转 到 不 同 的 URL 地址。 热点 的 形状 有 和 矩形 、 椭 圆 形 、 
多 边 形 三 种 。 操 作 步 又 如 下 。 

(1) 单 击 “ 热 点 "工具 ,绘制 矩形 热点 区 域 (或 椭圆 形 、 多 边 形 区 域 ), 如 图 11. 41(a) 所 
示 。 创 建 的 热点 区 域 被 半 透 明 的 蓝 色 所 覆盖 ,如 图 11.41(b) 所 示 。 

(2) 单 击 “指针 ?工具 , 单 击 热点 区 域 , 可 对 热点 进行 编辑 ,移动 热点 位 置 , 单 击 热点 的 
控制 点 可 改变 热点 的 形状 。 在 “属性 ”面板 中 ,可 为 热点 添加 链接 地 址 ,如 图 11. 41(c) 
所 示 。 


图 11.41 热点 的 使 用 


11.5.2 ”创建 按钮 .导航 栏 及 弹出 式 菜单 


为 了 使 网 页 更 加 生动 .美观 ,常常 在 网 页 中 添加 按钮 .导航 栏 及 弹出 菜单 。 例 如 , 当 鼠 
标 经 过 按钮 时 ,按钮 图 像 会 改变 颜色 ,形状 ,甚至 发 出 声音 吸引 访客 的 点 击 。 


1. 创建 按钮 


Fireworks 中 的 按钮 ,是 元 件 中 的 一 种 ,利用 按钮 元 件 不 但 可 以 做 出 式样 新 颖 的 按 
钮 ,而 且 可 直接 为 按钮 加 上 切片 区 域 和 热点 区 域 ,设置 交互 功能 和 网 页 上 的 超 链接 
功能 。 

【 例 11.16】 制作 动态 按钮 。 操 作 步 又 如 下 。 

(1) 新 建 一 个 文档 ,画布 大 小 为 1000X210( 像 素 ) ,背景 颜色 为 白色 。 单 击 “* 圆 角 拢 
形 ” 工 具 , 在 “属性 ?面板 中 ,设置 填充 为 “线性 渐变 ”, 渐 变 颜 色 由 灰色 (# CCCCCC) 一 白色 
( 井 FFFFFF) 一 灰色 (# CCCCCC) ,绘制 一 个 圆 角 和 矩形 ,添加 “内 斜 角 ” 和 “投影 ” 滤 镜 
效果 。 

(2) 单 击 “ 文 本 ?工具 ,在 “属性 ?面板 中 ,设置 填充 颜色 为 深蓝 色 (#000066) ,字体 为 
“黑体 ”, 输 入 文本 “返回 首页 ”。 

(3) 选中 文本 和 圆 角 矩形 ,选择 “窗口 ?菜单 对齐” 命令 ,打开 “对 齐 ? 面 板 , 单 击 * 水 
平 居中 ”和 “垂直 居中 ?按钮 。 选 择 * 人 和 修改" 菜单 一 元 件 ” 一 “转换 为 元 件 ” 命 令 ,或 按 下 快捷 
键 F8, 弹 出 “转换 为 元 件 ” 对 话 框 ,元 件 类 型 选择 为 “按钮 ”. 单 击 “ 确 定 ” 按 钮 。 此 时 图 形 上 
方 有 一 半 透 明 的 绿色 矩形 区 域 , 即 为 切片 区 域 。 选 中 此 区 域 .在 “属性 ”面板 中 可 输入 链接 
地 址 。 

(4) 双击 画布 中 按钮 (画布 中 的 元 件 被 称 为 “实例 ”) ,进入 到 按钮 元 件 的 编辑 状态 。 
“按钮 ?元 件 有 4 种 状态 :“ 弹 起 ”“ 滑 过 ”、“ 按 下 ”和 “ 按 下 时 滑 过 ”"。 打 开 “ 状 态 ” 面 板 , 单 
击 * 滑 过 ”状态 ,在 “属性 ?面板 中 , 单 击 “复制 弹 起 时 的 图 形 ?按钮 ,选中 圆 角 和 矩形 ,修改 渐变 
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的 颜色 ; 单 击 * 按 下 ?状态 , 单 击 “ 复 制 滑 过 时 的 图 形 ?按钮 ,选中 圆 角 和 矩形 ,选择 * 凸 起 浮雕 ” 
滤 镜 效果 。 

(5) 单 击 * 按 下 时 滑 过 ”状态 , 单 击 * 复 制 按 下 时 的 图 形 ” 按 钮 , 单 击 * 完 成 "按钮 ,返回 
文档 窗口 。 

按钮 的 另 一 种 制作 方法 是 : 选择 “编辑 "菜单 一 “插入 ”选项 一 “新 建 按钮 "命令 ,直接 
进入 按钮 元 件 的 编辑 状态 。 首 先进 入 “ 弹 起 ”状态 ,如 图 11. 42 所 示 。 绘 制图 形 , 输 入 文 
本 ,然后 再 编辑 其 他 状态 的 图 形 。 在 按钮 元 件 的 编辑 状态 , 单 击 “ 导 入 ”按钮 ,也 可 导入 在 
其 他 软件 编辑 好 的 图 形 作为 按钮 。 


画 币 | [而 大小， ] [ 国 全 大 个 符 台 面 布 “] 
向 ca 最 6 适 258 色 
ws 半 | 
Ey | 


图 11.42 编辑 按钮 


2. 创建 导航 栏 

导航 栏 是 指 一 组 分 别 指向 不 同 链接 地 址 的 按钮 ,通常 这 些 按钮 在 外 观 上 保持 一 致 ,可 
通过 复制 按钮 的 方法 快速 制作 导航 栏 , 然 后 选择 各 个 按钮 设置 不 同 的 文本 、 超 链接 等 。 一 
个 导航 栏 实例 如 图 11. 43 所 示 。 


ET CE OT CT CT CT oT 
图 11.43 导航 条 实例 


【 例 11.17】 在 例 11. 16 的 基础 上 .继续 制作 如 图 11. 43 所 示 导 航 栏 , 操 作 步 又 如 下 。 

(1) 平面 设计 网 页 效果 图 。 单 击 “ 和 矩形 ”工具 ,填充 颜色 为 淡 紫 色 (#FFCCFF) 绘 制 
和 矩形 ,矩形 覆盖 了 整个 画布 。 在 画布 上 方 绘制 一 个 矩形 条 ,填充 颜色 为 紫色 ( 井 990099) 。 
在 画布 下 方 绘制 一 个 矩形 条 ,填充 为 “线性 渐变 ”, 颜 色 由 粉 紫色 (# FF00FF) 一 白色 
(FFFFFF) 一 粉 紫色 (#FF00FF) 渐 变 。 

(2) 导入 “时 尚 包 . jpg” 和 “ 女 鞋 . jpg” 文 件 , 单 击 “ 魔 术 棒 ”工具 ,分 别 选 中 这 两 幅 图 像 
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的 白色 区 域 , 按 Del 键 删除 。 两 幅 图 像 均 设置 “发 光 ” 滤 镜 效 果 , 均 设置 颜色 为 白色 ,宽度 
为 5。 再 导入 rose. jpg 文件 , 单 击 “ 缩 放 ” 工 具 缩 小 图 形 , 将 图 像 移动 到 最 右 侧 位 置 。 

(3) 单 击 “文本 "工具, 分别 输 入 三 段 文本 :“WELCOME TO BELLE”;“ 百 丽 ”; “心动 不 
会 比 行动 更 有 魅力 ”。 添 加 滤 镜 效果 ,将 文本 排版 到 合适 的 位 置 , 效 果 如 图 11. 44(a) 所 示 。 
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(9) 为 按钮 添加 链接 、 修 改 文本 及 对 齐 排列 
图 11.44 制作 导航 栏 


(4) 打开 * 库 ?面板 ,将 例 11. 16 制作 好 的 按钮 元 件 拖 入 到 画布 中 , 单 击 “ 编 辑 " 菜 单一 
“克隆 ”命令 ,克隆 6 个 按钮 实例 ,如 图 11. 44 所 示 。 

(5) 选中 按钮 实例 ,在 “属性 ”面板 中 修改 文本 和 输入 链接 地 址 。 把 所 有 的 按钮 实例 
选中 ,选择 “窗口 ?菜单 “对齐 ”命令 ,打开 * 对 齐 面 板 , 单 击 顶端 对 齐 和 水 平 距离 相同 ( 间 
距 50) ,如 图 11. 44(c) 所 示 。 最 终 制作 效果 如 图 11. 43 所 示 。 


3. 创建 弹出 菜单 


弹出 菜单 主要 应 用 于 导航 栏 中 栏目 存在 子 栏目 的 情况 。 当 鼠标 指向 导航 栏 中 某 个 按 
钮 或 热点 区 域 时 ,会 出 现 相应 的 弹出 菜单 .显示 子 栏目 的 内 容 。 在 弹出 菜单 中 , 单 击 相应 
的 子 栏目 , 即 可 直接 链接 到 子 栏 目 所 在 的 页 面 。 

【 例 11.18】 在 例 11. 17 导航 栏 实例 的 基础 上 ,继续 制作 弹出 菜单 。 操 作 步 又 如 下 。 

(1) 单 击 “显示 切片 和 热点 ?工具 固 ( 区 别 于 “隐藏 切片 和 热点 ”工具 回 ) , 单 击 某 个 按 
钮 实例 ,例如 单 击 * 产 品 介绍 ?按钮 , 单 击 按钮 上 的 行为 柄 ,在 弹出 的 下 拉 菜 单 中 选择 “添加 
弹出 菜单 ”命令 ,如 图 11. 45 所 示 , 弹 出 “弹出 菜单 编辑 器 ”对 话 框 ,这 里 包含 了 四 个 选项 
卡 : 内 容 、 外 观 、 高 级 和 位 置 。 


wm | 8 | | 
图 11.45 创建 弹出 菜单 图 11.46 “内 容 " 选 项 卡 


(2) 在 “内 容 ” 选 项 卡 中 ,输入 文本 、 链 接地 址 并 选择 链接 目标 , 单 击 “ 十 ”号 或 一” 号， 
添加 或 删除 菜单 项 目 。 单 击 * 缩 进 ” 按 钮 区 .是 在 当前 菜单 项 目下 创建 子 菜单 , 单 击 * 左 缩 
进 ” 按 钮 目 , 是 将 下 级 菜单 恢复 为 同 级 菜单 ,如 图 11. 46 所 示 。“ 文 本 ” 即 在 网 页 中 显示 菜 
单 名 称 。 输 入 完毕 后 , 单 击 “ 外 观 ” 选 项 卡 或 单 击 “ 继 续 ” 按 钮 进入 到 “外 观 ” 选 项 卡 。 

(3) 在 “外 观 ? 选 项 卡 中 ,设置 弹出 菜单 的 显示 方式 ,如 图 11. 47 所 示 。 其 中 ,“ 单 元 
格 ” 可 以 HTML 或 图 像 形 式 显 示 ,单元 格 对 齐 方式 包括 “垂直 菜单 "或 “水 平 菜单 "。 在 该 
选项 卡 中 还 可 设置 文本 字体 .字体 大 小 .字体 样式 .文本 对 齐 方式 ;设置 菜单 项 弹 起 状态 和 
滑 过 状态 ,包括 文本 颜色 .单元 格 颜色 等 。 完 成 设置 后 , 单 击 * 高 级 ”选项 卡 或 单 击 * 继 续 ” 


按钮 ,进入 “高 级 ”选项 卡 。 
ETIEEEE | 
内 容 外观 | 高 级 | 位 置 | 
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图 11.47 “外 观 ? 选 项 卡 


(4) 在 “高 级 ”选项 卡 中 ,设置 弹出 菜单 外 观 风格 ,包括 表格 的 属性 ,如 边框 的 宽度 、 颜 
色 及 菜单 内 容 与 边框 的 距离 等 ,如 图 11. 48 所 示 , 单 击 “ 位 置 " 选 项 卡 或 单 击 “ 继 续 ” 按 钮 ， 
进入 到 “位 置 " 选 项 卡 。 


图 11.48 “高 级 "选项 卡 


(5) 在 “位 置 ”选项 卡 中 ,设置 弹出 菜单 弹出 的 位 置 ,如 图 11. 49 所 示 , 单 击 “ 完 成 " 按 
钮 , 回 到 文档 窗口 。 弹 出 菜单 位 置 的 设置 可 在 文档 窗口 中 设置 ,方法 是 拖 动 弹出 菜单 线 框 
移动 到 合适 位 置 即 可 。 


图 11.49 “位 置 ?选项 卡 
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(6) 在 文档 窗口 中 ,选择 “文件 "菜单 一 “在 浏览 嚣 中 预览 ”一 “IE 浏览 器 ?命令 (或 直 
接 单 击 快捷 键 F12) ,在 浏览 器 预览 弹出 菜单 的 效果 ,如 图 11. 50 所 示 。 


湖 流 圣 款 | 新款 女 凉 往 


E-belle 手 维 | 新 款 女 单 圣 
设计 师 款 | 新 款 女 腹 


图 11.50 浏览 弹出 菜单 


如 果 需 修改 弹出 菜单 , 则 选择 "修改 ?菜单 弹出 菜单 ”一 “编辑 弹出 菜单 ”命令 ,或 单 
击 导 航 按钮 热点 区 域 的 行为 柄 ,在 弹出 菜单 中 选择 “编辑 弹出 菜单 "命令 。 


11.5.3 制作 交换 图 像 


为 了 使 网 页 丰富 多 彩 , 网 页 设计 者 可 采用 各 种 手段 来 增强 网 页 本 身 动态 效果 和 人 机 
交互 的 特性 ,翻转 图 像 是 最 常用 的 一 种 手段 。 所 谓 “ 翻 转 图 像 ”, 是 指 当 用 户 浏览 网 页 时 ， 
将 光标 移动 到 图 像 上 ,该 图 像 产 生变 化 。 这 里 主要 讲 两 种 翻转 效果 :“ 简 单 翻 转 图 像 ? 和 
“不 相交 翻转 图 像 ”。 

【 例 11.19】 制作 简单 翻转 图 像 , 如 图 11. 51 所 示 ,操作 步骤 如 下 。 


- 一 


(a) 原始 状态 图 像 (b) 鼠标 经 过 图 像 
图 11.51 制作 简单 翻转 图 像 


(1) 单 击 “ 文 件 ” 菜 单一 “导入 ”命令 ,导入 两 幅 图 像 (风景 图 1. jpg, 风 景 图 2.jpg) , 单 
击 “ 指 针 ” 工 具 , 将 两 幅 图 像 的 大 小 调整 为 相同 尺寸 .并 且 位 置 重 共 。 

(2) 制作 一 个 带 阴 影 的 白色 和 矩形 块 。 单 击 “ 和 矩形 ”工具 ,绘制 一 个 矩形 ,矩形 比 图 略 大 
一 些 , 填 充 颜 色 为 白色 (#FFFFFF)。 再 克隆 一 个 矩形 ,选中 下 面 的 矩形 ,填充 颜色 为 灰 
色 (# CCCCCC) ,羽化 值 为 5, 利 用 “扭曲 ?工具 ,产生 阴影 效果 。 

(3) 单 击 “* 图 层 ? 面 板 右 侧 * 选 项 ”按钮 ,在 弹出 的 下 拉 菜 单 中 选择 “新 建 层 ”命令 ,弹出 
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“新 建 层 ?对 话 框 ,选择 “在 状态 之 间 共 享 ” 复 选 框 ,将 两 个 矩形 对 象 拖 放 到 该 层 中 。 再 在 
“图 层 ? 面 板 中 ,将 新 建 层 拖 动 , 置 于 原来 层 之 下 。 

(4) 打开 “状态 ”面板 , 单 击 “ 状 态 ” 面 板 右 侧 * 选 项 "按钮 。 在 弹出 的 下 拉 菜 单 中 选择 
“ 重 制 状 态 ” 命 令 , 在 弹出 的 “ 重 制 状态 ”对 话 框 中 ,状态 数量 选择 为 1。 目前 共有 两 状态 ， 
单 击 第 1 状态 ,在 “图 层 ” 面 板 中 单 击 第 二 幅 风景 位 图 中 的 第 一 个 方 框 ,隐藏 对 象 。 单 击 第 
2 状态 ,在 “图 层 ” 面 板 中 单 击 第 一 幅 图 像 中 的 第 一 个 方 框 ,同样 隐藏 对 象 。 再 单 击 第 1 状 
态 , 返 回 到 第 1 状态 ,如 图 11. 52(a) 所 示 。 


[el |v S me 
日 切片 


(a) 层 、 状 态 面板 (0) “行为 "面板 
图 11.52 隐藏 图 层 和 制作 切片 


(5) 单 击 “切片 ”工具 ,绘制 矩形 切片 区 域 ,切片 区 域 覆 盖 了 图 像 。 单 击 切片 ,再 单 击 
行为 柄 ,在 弹出 菜单 中 选择 “添加 简单 变换 图 像 行为 命令 ,如 图 11. 52(b) 所 示 。 打 开行 
为 ”面板 ,查看 行为 ,如 图 11. 52(c) 所 示 。 单 击 文档 窗口 左上 方 的 “预览 ”选项 卡 ,预览 图 
像 效 果 ,鼠标 经 过 前 后 的 图 像 分 别 如 图 11. 51 中 (a)、(b) 所 示 。 

【 例 11.20】 制作 不 相交 翻转 图 像 , 当 鼠 标 经 过 某 个 图 像 时 ,改变 了 在 页 面 中 另 一 个 
区 域 的 显示 内 容 。 操 作 步 骤 如 下 。 

(1) 依次 导入 三 幅 图 像 : 花卉 1. jpg、 花 卉 2. jpg、 花 卉 3. jpg; 单 击 “ 指 针 ” 工 具 , 调 整 
三 幅 图 像 至 尺寸 大 小 相同 、 位 置 重 春 。 将 图 像 统一 放置 在 右 侧 , 单 击 “和 矩形” 工具, 在“ 属 
性 ”面板 中 设置 填充 为 “无 ”, 笔 触 为 红色 ,宽度 为 1 绘制 矩形 框 ,矩形 框 与 三 幅 图 像 在 同 
一 位 置 。 分 别克 隆 三 幅 花 卉 图 像 , 选 择 “ 修 改 ” 菜 单一 “变形 ”一 “数值 变形 ”命令 ,缩放 至 
45% ,将 缩小 后 的 图 像 置 于 画布 的 左 侧 。 同 时 选中 三 幅 小 图 像 ,选择 “窗口 ?菜单 对 齐 ” 
命令 , 单 击 “ 左 对 齐 ” 和 “垂直 中 间 分 布 ”按钮 ,如 图 11. 53(a) 所 示 。 

(2) 打开 “状态 ”面板 , 重 制 3 个 状态 ,分 别 单 击 状态 1 到 状态 4, 在 “图 层 ” 面 板 中 设置 
对 象 的 显示 与 隐藏 ,状态 1 只 显示 红色 矩形 框 ,隐藏 三 幅 花 卉 图 像 ,状态 2 右 侧 图 像 只 显 
示 向 阳 花 ,状态 3 右 侧 图 像 只 显示 蒲公英 ,状态 4 右 侧 图 像 只 显示 莲花 。 
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分 隔 的 翻转 图 像 效 果 


(a) 布局 画布 


分 隔 的 翻转 图 像 效 果 


一 起 Er 习 口 | 久 :「 习 
looo00001_x; | |orr 接近 有 页 256 色 了 交代 : 
站 [7 目标 : 习 


[57 wz | 
(b) 变换 图 像 的 设置 
图 11.53 制作 不 相交 翻转 图 像 


(3) 单 击 “切片 ?工具 ,按照 小 图 像 的 大 小 分 别 绘制 矩形 切片 ,在 右 侧 位 置 绘制 一 个 大 
的 矩形 切片 。 

(4) 单 击 第 1 个 小 图 像 处 的 矩形 切片 , 单 击 行为 柄 ,选择 弹出 菜单 中 “添加 交换 图 像 行 
为 "命令 ,弹出 “交换 图 像 ” 对 话 框 ,选择 交换 图 像 切片 为 右 侧 切片 ,状态 编号 为 “状态 2”, 选 中 
“预先 载 入 图像"? 和 “鼠标 移 开 时 复原 图 像 " 复 选 框 , 单 击 “ 确 定 ” 按 钮 ,如 图 11. 53(b) 所 示 。 

(5) 同 理 设置 第 2 个、 第 3 个 小 图 像 处 的 矩形 切片 ,方法 同步 又 (4) ,状态 编号 分 别 为 
状态 3 状态 4。 完 成 操作 ,检查 制作 效果 。 


11.6 网 站 首页 的 设计 


一 般 而 言 , 首 页 设计 几乎 等 同 于 整个 网 站 设计 ,因此 网 站 首页 设计 非常 重要 。 首 页 设 
计 要 考虑 的 问题 涉及 配色 方案 的 确定 、 版 面 布局 .网 站 内 容 的 填充 等 。 


网 站 规划 与 网 页 设计 


要 制作 首页 ,首先 要 对 主页 有 一 个 版 面 布局 规划 ,这 样 才能 合理 安排 网 页 的 内 容 , 如 
图 11. 54 所 示 。 


网 站 标志 
导航 区 
公司 简介 
推荐 产品 图 片 
产品 标识 
广告 语 
版 权 区 和 地 址 信息 


图 11.54 规划 首页 布局 


作为 设计 者 来 说 ,一 般 采 用 Fireworks 或 Photoshop 之 类 的 工具 软件 来 绘制 网 页 版 
面 布局 图 ,然后 将 其 导出 到 网 页 编辑 软件 ,如 Dreamweaver 中 进行 编辑 ,这 种 方法 可 以 使 
页 面 控制 更 加 得 心 应 手 。 

【 例 11.21】 利用 Fireworks 设计 某 企 业 网 站 首页 ,操作 步骤 如 下 。 

(1) 配色 方案 的 确定 。 该 企业 性 质 为 医疗 器 械 ,根据 企业 性 质 确定 网 站 首页 配色 方 
案 为 绿色 与 白色 的 搭配 ,辅助 配 以 橘 黄色 ,整体 的 感觉 是 自然 .清新 洁净。 

(2) 页 面 大 小 的 确定 。 考 虑 到 目前 浏览 器 的 主流 分 辨 率 为 1024X768( 像 素 ) ,因此 网 
页 的 宽度 不 宜 超过 1007 像素 ,否则 会 出 现 横 向 滚动 条 。 这 里 确定 页 面 大 小 为 1000 X 615 
(像素 ) 。 

(3) 打开 Fireworks 软件 ,新 建 一 个 文档 ,设置 画布 大 小 为 1000X615( 像 素 )。 导 入 
公司 Logo 标志 (logo. gif) ,输入 公司 中 文 和 英文 名 称 , 用 线条 稍 加 修饰 ,如 图 11. 55 所 示 。 


logo 和 标志 


Xxxx xxxx Electronic Co.,LTD 


某 某 企 此 


图 11.55 网 页 标志 设计 


(4) 绘制 网 页 装饰 部 分 。 通 过 绘制 绿色 的 带 有 弧度 的 色 块 和 弧 线 以 增加 网 页 的 美观 
和 可 欣赏 性 。 单 击 “ 和 矩形 "工具 ,在 “属性 ”面板 中 .设置 填充 颜色 为 深 绿色 (#008B00), 在 
网 页 最 下 方 绘制 版 权 区 , 单 击 “ 部 分 选取 ”工具 , 单 击 右 侧 上 方 的 节点 , 按 下 Alt 键 并 拖 动 
鼠标 ,此 时 和 矩形 上 方 的 直线 变 为 曲线 ,再 拖 动 调节 杆 ,调节 曲线 的 曲率 。 单 击 “ 文 本 ”工具 ， 
输入 公司 版 权 信息 。 

(5) 制作 首页 主体 内 容 部 分 , 单 击 “ 文 本 ”工具 ,输入 公司 简介 的 内 容 。 再 选择 “文件 ” 
菜单 -导入 ”命令 ,导入 产品 三 幅 图 像 (pro01. jpg、pro02. jpg 和 pro03. jpg) 。 

(6) 制作 右 下 角 的 广告 语 和 产品 标志 区 域 。 选 择 “ 文 件 ” 菜 单一 “导入 ”命令 ,导入 产 
品 标识 图 片 (haodaifu. gif) , 单 击 “ 文 本 ”工具 ,在 “属性 ”面板 中 ,设置 文本 填充 颜色 为 红 
色 , 输 入 文本 “诚实 守信 团结 奋进 "。 单 击 “ 钢 笔 ” 工 具 绘 制 一 条 半圆 弧 的 曲线 ,同时 选中 
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文本 和 曲线 ,选择 “文本 ”菜单 ~“ 附 加 到 路 径 ” 命 令 。 再 选中 文本 ,选择 “文本 ”菜单 ~“ 转 
换 为 路 径 ” 命 令 ,设置 文本 笔触 为 白色 ,宽度 为 2, 并 添加 “投影 ” 滤 镜 效果 。 

(7) 制作 导航 栏 。 选 择 “ 编 辑 ” 菜 单一 “插入 ”一 “新 建 按钮 "命令 ,进入 按钮 元 件 编 辑 
状态 。 单 击 “ 椭 圆 ” 工 具 , 在 “属性 ”面板 中 ,设置 填充 颜色 为 “放射 渐变 ”, 颜 色 由 白色 
〈( 井 FFFFFF) 一 绿色 (#00CC00) 渐 变 绘制 圆 形 。 单 击 “ 文 本 ”工具 ,在 “属性 ?面板 中 , 设 
置 文本 大 小 为 14 像素 ,宋体 ,笔触 为 黄色 (#FFFF00)。 输 入 文本 “公司 简介 ”, 然 后 再 分 
别 编辑 * 滑 过 ”“ 按 下 ?“ 按 下 时 滑 过 ?三 种 状态 时 文本 对 象 为 不 同 的 滤 镜 效 果 。 单 击 * 完 
成 ”按钮 返回 到 文档 窗口 。 

单 击 “钢笔 ?工具 ,绘制 一 条 贝 赛 尔 曲线 ,设置 笔触 颜色 为 深 绿色 (并 008B00) 。 

(8) 打开 * 库 ?面板 ,将 按钮 元 件 拖 至 文档 中 。 克 隆 7 个 按钮 实例 ,分 别 选中 按钮 实 
例 , 在 “属性 ?面板 中 ,修改 按钮 实例 的 文本 ,如 * 产 品 总 汇 "“ 新 闻 蔡 蘑 ” 等 , 单 击 * 指 针 ? 工 
具 , 调 整 按钮 沿 曲线 排列 的 位 置 。 

(9) 单 击 “切片 "工具 ,切割 图 像 , 打 开 * 优 化 ?面板 ,对 每 一 个 切片 图 像 进行 属性 设置 ， 
最 后 选择 “文件 ”菜单 一 “导出 ”命令 ,导出 网 页 ,浏览 网 页 效果 ,如 图 10. 56 所 示 。 


GO 标定 Es 
Xxxx xxxx Electronic Co.,LTD i 四 3 了 L| 


nd 电子 有 限 公司 主要 开发 、 i SE 主要 产品 
Ed “医用 降 压 
新近 术 产业 : Dat EP Rs 
全 了 和 有 日 召开 的 “世界 传 ”上 ，“xxx 针 我 治疗 
及 “医用 降 压 测 压 仪 ”被 A ee FF 


图 11.56 首页 平面 设计 


本 章 小 结 


本 章 主要 介绍 了 利用 Fireworks 设计 网 页 的 方法 和 技巧 ,包括 : 
(1) 色彩 的 基本 知识 及 图 形 图 像 的 基本 概念 

(2) 创建 静态 图 形 图 像 。 

(3) 动画 的 制作 方法 。 

(4) 动态 交互 图 像 效 果 的 制作 方法 。 

(5) 在 Fireworks 中 设计 整 幅 主页 页 面 。 


网 站 规划 与 网 页 设计 


(1) 简 述 位 图 和 矢量 图 的 区 别 。 

(2) 对 待 文本 可 以 像 对 待 矢量 对 象 一 样 处 理 吗 ? 

(3) 将 大 图 分 隔 成 小 图 有 什么 优点 ? 如 何 使 用 切片 工具 ? 

(4) 导出 Fireworks 动画 时 .必需 的 设置 是 什么 ? 

(5) 在 Fireworks 中 ,一 共有 几 种 类 型 的 元 件 ? 它们 分 别 是 什么 ? 
(6) 按钮 的 4 种 状态 分 别 是 什么 ? 


上 机 实验 


1. 实验 要 求 
(1) 处 理 一 幅 位 图 效果 。 要 求 : 风景 汽车 、 人 物 有 机 地 融合 在 一 起 ,如 图 11. 57 
所 示 。 


(2) 制作 蕴 果 标志 矢量 图 形 。 要 求 : 利用 矢量 工具 绘制 苹果 标志 ,如 图 11. 58 所 示 。 


EN 


图 11.57 实验 : 位 图 效果 图 图 11.58 实验 : 制作 矢量 图 形 


(3) 制作 树叶 落下 的 动画 特效 。 要 求 : 利用 元 件 设置 动画 ,重复 使 用 元 件 ,产生 多 片 
树叶 从 树 上 落下 来 的 动画 ,如 图 11. 59 所 示 。 

(4) 制作 风景 相册 的 翻转 图 像 效 果 。 要 求 : 

Q@ 利用 Fireworks 自 带 行为 ,制作 分 隔 的 翻转 图 像 。 

@ 利用 切片 工具 ,切割 图 片 。 

@ 最 后 导出 为 网 页 和 图 像 , 如 图 11. 60 所 示 。 

(5) 制作 按钮 和 导航 栏 。 要 求 : 

a 绘制 一 个 矢量 图 形 , 并 添加 文本 ,转换 为 按钮 元 件 。 


| 


图 11.59 实验 : 制作 动画 图 11.60 实验 : 制作 翻转 图 像 


@ 按钮 克隆 后 ,水平 或 垂直 排列 ,添加 不 同 的 链接 路 径 和 修改 文本 显示 方式 , 即 为 导 
航 栏 , 如 图 11. 61 所 示 。 


用 我 们 的 真诚 5 智慧 


给 您 的 数码 最 由 上 夕 > 的 服务 


办 Xx 电 了 公司 | BE BE 2 ER 


图 11.61 导航 栏 及 弹出 菜单 


(6) 制作 弹出 菜单 。 要 求 : 利用 Fireworks 的 自 带 行为 ,在 导航 栏 的 基础 上 ,创建 弹 
出 菜单 。 

(7) 设计 Web 页 面 。 要 求 : 

J@D 布局 页 面 ,规划 网 页 内 容 。 

@ 绘制 页 面 分 区 ,填充 网 页 内 容 , 切 割 图 片 ,导出 网 页 ,如 图 11. 62 所 示 。 


2. 背景 知识 


根据 本 章 所 学 的 色彩 配色 的 知识 ,再 结合 本 章 所 学 的 利用 Fireworks 制作 静态 图 像 
及 动态 图 像 的 技术 ,独立 设计 网 页 平面 图 。 


3. 实验 准备 工作 
将 实验 的 样 图 及 相应 的 图 像 及 文本 素材 发 送 到 学 生 主 机 , 供 学 生 参 考 使 用 。 
4. 课时 安排 


上 机 实验 安排 8 课时 ,每 两 项 实验 要 求 共 为 2 课时 ,最 后 第 7 项 实验 要 求 单独 安排 
2 课时 。 
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给 您 的 数码 最 由/ 心 的 服务 
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于 手机 村 件 ， 下 村 法 ， 电 汉 , 卫 机 
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® Bash, 25000. 3500W 
下 机 WUCft， 记 志 樟 . 于 包 


Product 


Set 
EE 天 和 计 三 [二 Tn, ph. TE 
做， 由、IRL 内 EE. Fa. ed. WE 


和 EN Tm 


这 公司 Crment 13 如 Tc resarret 才 有 有 半 于， 肖 从 可 有 于 人权 ， 基 斥 本， 放生 9 污 放 EEH 
MaMh WF 


图 11.62 网 站 首页 的 设计 


5. 实验 指导 


1) 处 理 如 图 11. 57 所 示 位 图 效果 

(1) 打开 汽车 图 像 (car. jpg) ,用 “多 边 形 套 索 ” 工 具 把 汽车 抠 出 来 ,然后 复制 到 风光 图 
像 ( 风 光 .jpg) 中 ,使 用 发 光 滤 镜 (颜色 为 白色 ) 。 

(2) 打开 明星 图 像 (meinv. jpg) ,添加 位 图 蒙 版 , 单 击 * 套 索 ” 工 具 , 沿 人 物 图 像 的 边缘 
绘制 ,最 后 闭合 ,反选 ,然后 单 击 “ 油 漆 桶 ”工具 ,用 黑色 填充 周围 区 域 ,将 人 物 图 像 复 制 到 
风光 图 像 中 。 克 隆 人 物 图 像 ,然后 选中 此 克隆 图 像 ,在 “属性 ”面板 中 将 混合 模式 改 为 屏 
幕 ,不 透明 度 改 为 60, 另 一 人 像 图 像 缩小 至 50%% ,操作 完成 。 

2) 制作 苹果 标志 矢量 图 形 ( 见 图 11. 58) 

(1) 画 一 个 正 圆 , 上 节点 向 下 拉 5 个 像素 ,左右 节点 向 外 拉 5 个 像素 ,使 得 苹果 看 上 
去 较为 饱满 ,然后 在 此 图 形 的 上 下 用 一 个 小 椭圆 打 孔 , 将 上 下 节点 的 调节 杆 调节 为 一 个 水 
平 节 线 。 

(2) 右 侧 用 一 个 小 椭圆 打 孔 使 大 苹果 像 被 咬 了 一 口 一 样 。 

(3) 画 两 个 圆 , 取 两 个 圆 的 交集 作为 苹果 柄 。 
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(4) 为 整个 苹果 制作 内 发 光 滤 镜 效果 ,颜色 设 为 绿色 ,高 度 为 3。 

(5) 革 果 上 侧 和 苹果 柄 上 侧 的 泛 白 效果 是 先 采 用 两 个 圆 的 交集 制作 出 月 牙 , 然 后 填 
充 为 白色 ,设置 羽化 值 为 3 即 可 。 整 个 矢量 图 形制 作 完成 。 

3) 制作 树叶 落下 的 动画 特效 ( 见 图 11. 59) 
(1) 打开 树 图 像 ( 树 . gif) ,导入 落叶 图 像 (落叶 . png) ,选中 落叶 , 单 击 “修改 "菜单 一 
“元 件 ” 一 “转换 为 元 件 ” 命 令 ,元 件 类 型 为 "图形 ”。 

(2) 选中 落叶 ,选择 “修改 "菜单 一 “动画 ”一 “设置 动画 ”命令 ,进行 相关 参数 的 设置 ， 
单 击 “ 确 定 ” 按 钮 ,返回 文档 窗口 ,可 修改 动画 变化 的 方向 和 距离 。 

(3) 打开 “ 库 ” 面 板 , 将 图 形 元 件 多 次 拖 入 到 画布 ,并 分 别 设置 动画 ,操作 完成 。 

4) 制作 风景 相册 的 翻转 图 像 效 果 ( 见 图 11. 60) 

(1) 新 建 一 个 文档 ,导入 三 幅 九 寨 沟 风景 图 (翻转 图 像 1. jpg、 翻 转 图 像 2. jpg、 翻 转 图 
像 3.jpg) 。 

(2) 修改 三 幅 风景 图 像 尺 寸 大 小 一 致 . 位 置 相同 。 在 图 下 方 绘制 一 个 矩形 ,填充 为 灰 
色 ,克隆 一 个 矩形 ,填充 为 白色 , 另 一 灰色 和 矩形 做 羽化 处 理 , 用 “扭曲 ” 工 具 使 其 变形 ,使 得 
矩形 框 有 立体 感 。 然 后 把 三 幅 风景 图 缩小 到 30% ,并 移 到 画布 的 最 上 方 排列 整齐 ,新 建 
“在 状态 中 共享 层 ”, 三 幅 缩小 的 风景 图 像 , 有 立体 感 的 矩形 框 放 在 此 层 中 。 

(3) 打开 “状态 ”面板 , 重 制 两 状态 ,通过 显示 和 隐藏 图 像 对 象 的 方法 ,显示 为 不 同 的 
风景 图 。 

(4) 用 “切片 ”工具 切割 图 片 ,三 幅 小 图 片 处 用 三 个 矩形 切片 ,在 大 图 片 处 用 一 个 矩形 
切片 覆盖 ,然后 单 击 小 图 片 切片 区 域 , 单 击 行为 柄 添加 交换 图 像 行 为 。 

(5) 打开 * 优 化 ?面板 ,设置 每 一 个 切片 图 像 的 属性 ,最 后 导出 网 页 和 图 像 。 

5) 制作 按钮 和 导航 栏 ( 见 图 11.61) 

(1) 新 建 一 个 文档 ,画布 大 小 为 1000X400( 像 素 ) ,导入 位 图 修饰 页 面 ,输入 企业 的 广 
告 用 语 ,再 绘制 两 个 较 窗 的 矩形 条 ,添加 滤 镜 效果 ,在 和 矩形 条 上 绘制 企业 的 LOGO。 

(2) 在 另 一 个 矩形 条 上 方 绘制 一 个 矩形 块 , 填 充 渐变 色 ,输入 文本 “公司 首页 ”。 将 文 
本 和 和 矩形 框 选中 , 按 快捷 键 F8 ,将 文本 转换 为 按钮 元 件 ,双击 矩形 块 ,进入 按钮 编辑 状态 ， 
对 按钮 的 4 个 状态 进行 编辑 ,返回 页 面 ,添加 链接 路 径 。 

(3) 克隆 按钮 实例 ,分 别 在 “属性 ”面板 修改 文本 和 链接 路 径 , 然 后 水 平 排列 整齐 。 

6) 制作 弹出 菜单 

在 上 一 个 实 训 的 基础 上 继续 本 实 训 的 弹出 菜单 的 制作 。 

单 击 导航 栏 元 件 , 单 击 行为 柄 ,在 弹出 菜单 中 选择 “添加 弹出 菜单 "命令 ,进入 到 弹出 
菜单 的 编辑 对 话 框 ,可 使 用 内容” 选项 卡 “ 外 观 ” 选 项 卡 “ 高 级 ”选项 卡 “ 位 置 " 选 项 卡 对 
弹出 菜单 进行 编辑 。 

7) 设计 Web 页 面 ( 见 图 11. 62) 

(1) 在 上 一 个 实 训 的 基础 上 继续 本 实 训 的 Web 页 面 的 制作 。 将 画布 大 小 更 改 为 
1000X1100( 像 素 ) 。 

(2) 整个 网 页 的 上 半 部 分 已 经 设计 好 ,只 需 对 下 半 部 分 进行 设计 。 将 网 页 下 半 部 分 
规划 为 六 大 块 ,分 别 是 “搜索 ”“ 热 点 新 闻 ”“ 产 品 分 类 ”“ 产 品 中心 " “联系 我 们 ”“ 版 权 
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信息 ”板块 ,用 图 片 ` 线 框 和 色 块 装饰 。 
(3) 用 切片 工具 切割 图 片 , 最 后 导出 为 网 页 ,效果 如 图 11. 63 所 示 。 
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图 11.63 网 站 首页 的 设计 
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Flash 是 当前 最 流行 的 交互 式 矢量 制作 软件 ,用 它 制 作出 来 的 Flash 动画 具有 极 丰富 
的 表现 力 。Flash 可 以 制作 导航 按钮 .具有 声音 效果 的 动画 MTV 及 整个 Flash 站 点 。 
例如 知名 公司 可 口 可 乐 的 网 站 如 图 12. 1 所 示 。 
| | WR | 
DL DTK Ge0@eeoo@ 
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图 12.1 可 口 可 乐 网 站 (Flash 动画 版 ) 


本 章 通过 对 多 个 Flash 实例 由 浅 入 深 的 讲解 ,重点 介绍 矢量 图 设计 、 特 效 文 本 处 理 、 
添加 声音 及 ActionScript 的 初步 应 用 。 


【本 章 学 悦目 标 】 


。 了解 Flash 的 工作 界面 和 基本 操作 ; 
。 掌握 Flash 中 绘图 技巧 、 位 图 操作 与 文本 的 处 理 ; 
。 掌握 Flash 中 场景 元 件 与 实例 操作 、 图 层 的 管理 ; 
。 了 解 Flash 动画 的 类 型 ; 

。 掌握 如 何 创建 动画 ,实现 动画 的 交互 控制 

。 学 会 Flash 作品 的 设计 与 制作 。 


12.1 实例 导入 : 制作 Flash MTV 


【 例 12.1】 利用 Flash 技术 制作 图 、 文 、 声 并 茂 的 Flsah MTV ,如 图 12.2 所 示 。 


菲 比 寻 常 


图 12.2 Flash MTV 


主要 涉及 以 下 知识 点 。 

(1) 进行 画面 布局 。 

(2) 制作 补 间 动 画 。 

(3) 制作 按钮 。 

(4) 载 人 其 他 SWF 文件 。 

(5) 添加 ActionScript 脚本 语言 创建 交互 界面 
(6) 集成 Flash 影片 。 


12.2 ”Flash 概述 


12.2.1 Flash 的 工作 界面 


1.“ 启 动 ? 界 面 


在 启动 Flash CS5 时 出 现 * 启 动 ? 界 面 , 在 “启动 界面 用 户 可 以 快速 完成 最 常用 的 操 
作 , 如 图 12. 3 所 示 。 


2. 操作 界面 


Flash 的 操作 界面 主要 由 菜单 栏 ,工具 箱 、 时 间 轴 、 上 舞台“ 属性” 面板、 工作 面 板 组 等 
部 分 构成 ,如 图 12.4 所 示 。 
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图 12.3 Flash 的 启动 界面 
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图 12.4 Flash 的 操作 界面 


(1) 菜单 栏 : 与 其 他 软件 相同 ,Flash 的 菜单 栏 位 于 界面 的 上 方 , 包 含 了 Flash 中 所 有 


的 菜单 命令 。 


(2) 时 间 轴 : 用 于 组 织 动 画 不 同 层 和 不 同 帧 的 面板 ,水平 的 时 间 轴 代表 动画 的 不 同 
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阶段 ,连续 播放 就 产生 了 动画 。 时 间 轴 的 主要 部 件 是 帧 . 层 、 播 放 磁头 .状态 栏 和 标尺 ,如 
图 12.5 所 示 。 
帧 ”标尺 播放 磁头 
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图 12.5 时 间 轴 


(3) 工具 箱 : 放置 了 可 供 编辑 图 形 和 文本 的 各 种 工具 ,利用 这 些 工 具 , 用 户 可 以 方便 
地 进行 绘图 修改、 移动 .缩放 及 编排 文本 等 操作 。 工 具 箱 由 以 下 四 部 分 组 成 。 

。“ 工 具 ” 区 域 包 含 绘 图 、 上 色 和 选择 工具 。 

。“ 查 看 ”区 域 包 含 在 应 用 程序 窗口 内 进行 缩放 和 移动 的 工具 。 

。“ 颜 色 ” 区 域 包 含 用 于 笔触 颜色 和 填充 颜色 的 功能 键 。 

。“ 选 项 "区域 显 示 用 于 当前 所 选 工 具 的 功能 键 。 功 能 键 影响 工具 的 上 色 或 编辑 

操作 。 

(4) 舞台 和 工作 区 : 舞台 类 似 于 其 他 软件 中 的 画布 ,用 户 可 定义 动画 的 尺寸 和 舞台 
的 背景 颜色 。 舞 台 以 外 的 灰色 区 域 就 是 工作 区 ,类 似 于 剧院 的 后 台 , 它 可 以 放置 对 象 ,但 
只 有 舞台 上 的 内 容 才 能 在 最 终 的 动画 中 显示 ,工作 区 的 对 象 是 不 能 显示 的 。 

(5) 工作 面板 组 : 包括 了 很 多 面板 , 既 可 以 集成 ,也 可 以 浮动 在 界面 的 任意 位 置 。 

(6)“ 属 性 ”面板 : 又 称 为 属性 检查 器 ,显示 当前 选 定 对 象 的 属性 。 


12.2.2 ”Flash 的 基本 操作 

对 于 Flash 文档 编辑 和 操作 主要 有 以 下 几 个 方面 。 

1. 新 建文 档 

方法 一 ”选择 “文件 菜单" 新建" 命令 ,或 按 下 组 合 键 Ctrl 十 N, 弹 出 一 个 对 话 框 ， 
单 击 “ 常 规 ? 选 项 卡 或 是 “模板 ?选项 卡 ,选择 其 中 一 种 类 型 , 单 击 “确定 ”按钮 , 即 创建 一 个 
文档 ,如 图 12.6 所 示 , 在 对 话 框 右 侧 设置 文档 的 属性 .如 宽度 和 高 度 的 尺寸 (默认 为 
550X400( 像 素 ))、 帧 频 ( 默 认为 24fps) ,设置 背景 颜色 等 。 

方法 二 单 击 “ 启 动 ” 界 面 中 “新 建 " 选 项 组 中 的 某 一 类 型 ,或 是 “从 模板 创建 ”选项 组 
中 的 某 一 项 ,如 图 12. 3 所 示 。 例 如 选择 新建” 选项 一 “ActionScript 2. 0” 选 项 , 即 创建 了 


一 个 新 的 Flash 文档 。 
注意 : 本 教材 以 介绍 ActionScript 2.0 为 主 ,因此 新 建文 档 时 ,可 选择 ActionScript 2. 0。 


2. 打开 文档 


选择 "文件 菜单 打开 ?命令 ,或 使 用 组 合 键 Ctrl 十 O, 或 单 击 启 动 界面 中 “打开 最 
近 项 目 ” 中 的 某 个 文档 或 单 击 “ 打 开 ” 图 标 ,如 图 12. 3 所 示 。 
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3. 保存 文档 


选择 “文件 "菜单 一 “保存 "命令 ,或 使 用 组 合 键 Ctrl 十 S。 文 档 在 编辑 过 程 中 要 及 时 保 
存 ,Flash 文档 的 扩展 名 为 . fla。 


4. 发 布 影片 


制作 好 的 Flash 动画 最 终 要 发 布 出 来 或 者 嵌入 到 网 页 中 。Flash 软件 支持 多 种 能 够 
在 网 页 中 播放 的 文件 格式 。 

发 布 和 测试 Flash 文档 时 ,常用 的 方法 有 以 下 两 种 。 

方法 一 ”选择 “文件 "菜单 一“ 导出 ”选项 一 “导出 影片 "命令, 出现“ 导出 影片 ”对 话 框 ， 


选择 存储 路 径 , 在 “保存 类 型 "下 拉 列 表 中 选择 文件 格式 ,命名 文件 ,最 后 单 击 “ 保 存 ” 按 钮 ， 
如 图 12.7 所 示 。 


图 12.7 “导出 影片 ”对 话 框 
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方法 二 ”选择 “文件 ”菜单 一 “发 布设 置 " 命 令 , 在 弹出 的 “发 布设 置 " 对 话 框 中 选择 发 
布 文 件 的 格式 及 存储 路 径 , 然 后 单 击 “ 发 布 ” 按 钮 完成 发 布 ,如 图 12. 8 所 示 。 
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图 12.8 “发 布设 置 "对 话 杠 


12.2.3 Flash CS5 的 新 功能 


Flash CS5 在 以 前 版 本 的 基础 上 ,增加 了 一 些 十 分 实用 的 新 功能 ,下 面 将 进行 简单 
介绍 。 


1. 基于 对 象 的 动画 


Flash CS5 在 保留 传统 补 间 动 画 的 基础 上 增加 了 基于 对 象 的 动画 。 使 用 基于 对 象 的 
动画 不 仅 大 大 简化 了 Flash 中 的 设计 过 程 ,而 且 更 便于 控制 对 象 。 它 将 动画 补 间 效果 直 
接应 用 于 对 象 本 身 ,而 不 是 关键 帧 ,从 而 可 以 精 
确 控 制 每 个 单独 的 动画 属性 。 另 外 ,使 用 贝 赛 
尔 曲线 工具 (如 ”钢笔 工具 ”) ,可 以 轻松 地 调整 
对 象 的 运动 轨迹 ,如 图 12.9 所 示 。 

【 例 12.2】 完成 基于 对 象 的 动画 制作 ,如 
© 图 12. 9 所 示 。 具 体操 作 步 又 如 下 。 


图 场 县 1 


在 画布 上 绘制 一 个 圆 ,填充 为 白 至 黑色 的 
径 向 渐变 ,选择 “插入 ”菜单 一 “ 补 间 动 画 ” 命 令 ， 
图 12.9 基于 对 象 的 动画 将 圆 移动 一 定 的 位 移 , 给 出 一 条 绿色 的 线段 , 箭 
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头 靠近 线段 时 出 现 一 个 弧 线 , 拖 动 线段 ,形成 贝 赛 尔 曲线 , 即 对 象 的 运动 轨迹 。 
2. 3D 变形 


在 Flash CS5 中 ,新 增加 了 两 种 全 新 的 3D 变形 工具 : 3D 平 移 工 具 由 和 3D 旋转 工具 
万. 使 用 这 两 种 工具 ,用 户 可 以 对 X.Y 和 2Z 三 个 方向 的 坐标 轴 进 行 调节 。 


3. 使 用 "骨骼 ?工具 进行 反 向 运动 


使 用 “骨骼 工具 " 萝 可 以 向 单独 的 元 件 实例 或 单个 形状 的 内 部 添加 骨髓 。 在 移动 一 
个 骨骼 时 ,与 该 骨骼 相关 的 其 他 链接 骨骼 也 会 跟着 移动 ,创建 类 似 于 链 的 动画 效果 。 这 
样 , 可 以 更 加 方便 地 创建 人 物 动 画 。 


4. 使 用 Deco 工具 装饰 性 绘画 


使 用 Deco 工具 辆 可 以 快速 地 创建 万 花 简 效 果 , 并 轻松 地 将 任何 元 件 转换 为 即时 设 
计 工具 。 方 法 为 : 选中 “Deco 工具 ”, 在 “属性 ”面板 中 选择 “绘制 效果 ”的 类 型 ,在 画布 上 
单 击 即 可 绘制 ,再 单 击 或 双击 即 停止 绘制 ,如 图 12. 10 所 示 。 


vv 散 莫 式 填充 


图 12.10 使 用 Deco 工具 进行 装饰 性 绘画 


5.“ 动 画 编辑 器 ?面板 

“动画 编辑 器 ”面板 可 以 对 关键 帧 参数 (如 旋转 、 大 小 、 缩 放 、 位 置 和 滤 镜 ) 进 行 更 详细 
的 设置 ,如 图 12. 11 所 示 。 

6. 补 间 动画 预 设 

选择 “窗口 "菜单 “动画 预 设 ” 命 令 , 即 打开 “动画 预 设 ” 面 板 . 如 图 12. 12 所 示 。 使 用 
“动画 预 设 ” 面 板 , 可 以 对 任何 对 象 应 用 预 置 的 动画 。 方 法 是 : 选中 对 象 ,选择 “动画 预 设 ” 


面板 中 提供 的 数 十 种 预 设 动画 中 的 一 种 ,并 单 击 “ 应 用 ”按钮 即 可 。 另 外 ,用 户 可 以 创建 并 
保存 自己 的 动画 。 
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图 12. 12 “动画 预 设 * 面 板 
Flash CS5 还 有 很 多 新 增 功能 ,这 里 就 不 一 一 介绍 了 。 


12.3 ”Flash 的 基本 功能 


Flash 的 基本 功能 主要 包括 绘图 和 填充 ,文字 处 理 、 创 建 动画 元 件 和 实例 、 使 用 动作 
控制 内 容 、 添 加 声音 和 集成 电影 等 。 
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12.3.1 绘图 和 填充 
Flash 提供 了 多 种 绘图 和 填充 工具 ,可 以 用 来 绘制 直线 .形状 和 路 径 及 编辑 操作 。 
1. 笔触 与 填充 


单 击 某 个 绘图 工具 时 ,在 “属性 ”面板 中 可 设置 形状 或 路 径 的 笔触 和 填充 。 

(1)“ 油 漆 桶 ”工具 | 确 : 填充 图 形 颜 色 , 单 击 “油漆 桶 ?工具 时 ,在 工具 箱 下 方 选 项 区 域 
出 现 油漆 桶 的 相应 功能 键 , 如 图 12. 13 所 示 。 

如 果 需 要 更 多 的 填充 效果 ,选择 “窗口 "菜单 “颜色 ”命令 ,在 “颜色 ”面板 中 可 选择 多 
种 颜色 类 型 。 填 充 类 型 有 以 下 几 种 。 

无 : 删除 填充 。 

纯色 : 提供 一 种 纯正 的 填充 单 色 。 单 击 “ 填 充 ” 选 择 框 ,弹出 调 色 板 , 单 击 某 种 颜色 则 
选中 该 颜色 ,或 直接 输入 RGB 值 及 Alpha 值 定义 填充 颜色 。 

线性 渐变 : 产生 一 种 沿线 性 轨道 混合 的 渐变 。 

径 向 渐变 : 产生 从 一 个 中 心 焦点 出 发 沿 环形 轨道 混合 的 渐变 。 

位 图 渐变 : 允许 用 可 选 的 位 图 图 像 平 铺 所 选 的 填充 区 域 。 

当 采 用 渐变 填充 时 ,要 更 改 渐变 中 的 颜色 ,选择 “渐变 定义 栏 ? 下 面 的 某 个 颜色 指针 ， 
双击 ,弹出 调 色 板 , 单 击 某 种 颜色 。 拖 动 “ 亮 度 ” 调 节 杆 来 调整 颜色 的 亮度 。 当 光标 接近 浙 
变 栏 出 现 “ 十 "号 时 , 单 击 即 可 添加 渐变 颜色 ,如 图 12. 14 所 示 。 


锁定 填充 
| 


9 ， 〇 不 封 站 空 障 

加 封闭 小 空隙 
封闭 中 等 空隙 

名 封 六 大 空 障 


图 12.13 油漆 桶 相应 功能 键 图 图 12.14 渐变 填充 工具 


不 同 的 填充 效果 如 图 12. 15 所 示 。 


pr— 
用 纯 红色 填充 。 用 黄白 径 向 填充 。 ”用 灰 黑 线性 填充 用 位 图 填充 


图 12.15 不 同 的 填充 效果 


(2)“ 墨 水瓶 "工具 名 : 其 功能 是 改变 绘图 中 线条 和 轮廓 线 的 颜色 和 样式 。 
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2. 绘制 基本 几何 形状 


在 Flash 中 使 用 "直线 ? 工 具 愉 绘制 直线 ,使 用 "椭圆 ?工具 哆 绘制 顶 圆 ,使 用 "和 矩形 ” 
工具 国 绘 制 矩 形 ,使 用 "多 角 星 形 ? 工 具 心 绘制 多 边 形 或 星 形 。 

(1) 绘制 直线 : 单 击 * 直 线 ? 工 具 , 在 “属性 ?面板 中 设置 笔触 颜色 、 笔 触 高 度 、 笔 触 样 
式 。 按 住 Shift 键 , 绘 制 呈现 倾斜 度 为 45 "倍数 的 直线 。 

(2) 绘制 椭圆 : 单 击 “椭圆 ?工具 ,在 “属性 ?面板 中 设置 笔触 和 填充 颜色 。 在 舞台 上 
绘制 栖 圆 。 按 下 Shift 键 绘制 正 圆 形 , 若 按 下 Alt 键 则 以 当前 点 为 圆心 绘制 圆 形 。 

(3) 绘制 基本 椭圆 ; 与 “椭圆 "工具 相似 ,对 于 绘制 完成 的 椭圆 对 象 ,可 以 使 用 “ 选 
择 ” 工 具 , 单 击 图 形 , 拖 动 椭圆 上 的 节点 ,使 其 变 为 任意 形状 的 椭圆 图 形 , 如 图 12. 16 
所 示 。 

(4) 绘制 矩形 : 单 击 “ 和 矩形 ”工具 ,在 “属性 ”面板 中 设置 笔触 和 填充 颜色 ,在 舞台 上 绘 
制 矩 形 形 状 。 按 下 Shift 键 绘制 正方 形 , 若 按 下 Alt 键 则 以 当前 点 为 中 心 绘制 矩形 。 

(5) 绘制 基本 矩形 : 与 “矩形 ”工具 相似 ,在 绘制 的 矩形 周围 会 出 现 调节 框 。 对 于 绘 
制 完成 的 矩形 对 象 ,可 以 使 用 "选择 ?工具 , 单 击 图 形 , 拖 动 矩形 对 象 上 的 节点 ,使 绘制 的 矩 
形 对 象 变 为 任意 形状 的 圆 角 矩形 ,如 图 12. 17 所 示 。 

(6) 绘制 “多 边 形 " 工 具 , 单 击 “ 多 角 星 形 " 工 具 , 在 “属性 ”面板 中 设置 笔触 和 填充 颜 
色 , 单 击 * 选 项 ”按钮 ,弹出 如 图 12. 18 所 示 “ 工 具 设 置 " 对 话 框 ,在 此 设置 样式 (选择 多 边 形 
或 星 形 ) . 边 数 和 星 形 顶点 大 小 。 


图 12.16 绘制 基本 椭圆 图 12.17 绘制 基本 和 矩形 图 12.18 设置 多 边 形 相关 属性 


3. 绘制 曲线 


用 “钢笔 ”工具 路 ,可 以 绘制 直线 、 光 滑 的 曲线 和 任意 形状 的 图 形 。 单 击 “ 钢 笔 ” 工 具 ， 
在 舞台 上 单 击 可 创建 一 个 节点 ,连续 单 击 可 创建 折线 。 在 舞台 上 单 击 并 拖 动 鼠标 可 创建 
曲线 。 用 ”部 分 选取 ?工具 选中 节点 即 出 现 一 个 控制 柄 , 拖 动 控制 柄 ,控制 柄 的 长 度 和 方向 
决定 曲线 的 弯曲 程度 ,如 图 12. 19 所 示 。 

【 例 12.3】 利用 “钢笔 > 工具 绘制 一 个 心 形 形 状 , 操 作 步 又 如 下 。 

(1) 单 击 “ 钢 笔 ? 工 具 , 在 舞台 上 单 击 创建 第 一 个 节点 ,然后 在 第 一 个 节点 的 正 上 方 单 
击 并 拖 动 鼠标 ,控制 柄 呈 水 平方 向 , 回 到 第 一 个 节点 位 置 单 击 形成 一 个 封闭 的 曲线 。 

(2) 单 击 “部 分 选择 ?工具 , 单 击 上 方 节点 ,此 节点 有 一 条 水 平 控制 柄 , 按 住 Alt 键 调 
节 节 点 ,将 一 条 水 平 控制 柄 调节 为 两 条 控制 柄 , 拖 动 控制 柄 ,调节 控制 柄 呈 锐 角 。 
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(3) 单 击 “ 油 漆 桶 ”工具 ,在 “属性 ”面板 中 设置 填充 颜色 为 红色 ,在 舞台 封闭 区 域 单 击 
图 形 完成 填充 ,如 图 12. 20 所 示 。 


和 oOUvY 


图 12.19 用 钢笔 工具 绘制 折线 和 曲线 图 12.20 绘制 圆心 


4. 用 "铅笔 ?工具 绘图 


使 用 * 铬 笔 " 工 具 贺 绘画 的 方式 与 使 用 真实 铅笔 大 致 相同 。 要 在 绘画 时 平滑 或 伸 直 
线条 和 形状 ,用 户 可 以 给 “铅笔 工具 选择 一 种 铅笔 模式 。 在 “工具 "面板 的 “选项 ”区域 选 
择 一 种 相应 的 “铅笔 "模式 的 功能 键 。 

(1) 选择 * 伸 直 ? 功 能 键 呈 ,绘制 直线 ,并 将 接近 三 角形 .椭圆 ` 圆 形 、 和 矩形 和 正方 形 的 
形状 转换 为 这 些 常见 的 几何 形状 。 

(2) 选择 “平滑 ”功能 键 5 绘制 平滑 曲线 。 

(3) 选择 “墨水 ”功能 键 蜂 绘制 不 用 修改 的 手 画 线条 。 


5. 用 “刷子 工具 绘图 


“刷子 ”工具 | 问 能 绘制 出 笔 刷 般 的 笔触 ,就 像 用 户 在 涂 色 一 样 。 使 用 “刷子 ”工具 功能 
键 要 选择 刷子 大 小 和 形状 。 


6. 对 象 的 操作 


(1) 选取 对 象 : 单 击 “ 选 择 ” 工 具 , 单 击 舞 台 上 的 任意 对 象 ,选中 对 象 , 按 下 Shift 键 可 
同时 选中 多 个 对 象 ,或 拖 动 鼠标 在 舞台 上 绘制 一 个 矩形 区 域 ,选中 某 个 图 形 的 一 部 分 。 

(2) 调节 直线 和 节点 位 置 : 选中 对 象 后 , 当 * 选 择 ? 工 具 靠近 图 形 某 条 边线 时 ,选择 ” 
工具 的 箭头 处 出 现 一 条 曲线 多 ,此 时 拖 动 边线 变 成 曲线 。 当 “选择 ”工具 靠近 某 个 节点 ， 
“选择 ”工具 的 箭头 处 出 现 两 条 相交 的 直线 鸟 ,此 时 可 拖 动 节点 ,改变 节点 的 位 置 。 

(3) 移动 节点 : 用 “部 分 选择 ”工具 单 击 节点 .进行 拖 动 。 

(4) 角 点 曲线 点 之 间 的 转换 : 将 角 点 转换 为 曲线 点 时 , 单 击 角 点 , 按 住 Alt 键 拖 动 。 
将 曲线 点 转换 为 角 点 时 , 单 击 * 钢 笔 " 工 具 , 靠 近 曲 线 点 ,钢笔 工具 显示 为 杂 , 单 击 该 曲线 点 
即 可 。 

(5) 添加 节点 : 单 击 “ 钢 笔 " 工 具 , 靠 近 线段 要 添加 节点 的 位 置 , 这 时 指针 会 显示 为 入， 
单 击 。 

(6) 删除 节点 : 单 击 * 钢 笔 ? 工 具 , 靠 近 节点 的 位 置 ,这 时 鼠标 指标 会 显示 为 久 , 单 击 。 

(7) 调节 路 径 : 单 击 “ 部 分 选择 ”工具 , 单 击 节 点 ,通过 调节 控制 柄 的 长 度 和 方向 ,可 
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调节 曲线 。 
7. 缩放 和 旋转 对 象 


选中 对 象 ,缩放 和 旋转 对 象 ,常用 的 方法 有 以 下 三 种 。 

方法 一 单 击 “ 任 意 变 形 ” 工 具 几 ,选择 工具 箱 下 方 的 “选项 区 域 " 相 应 的 功能 按钮 : 
旋转 与 倾斜 项 ,缩放 图 、 扭 昌国 和 封套 颖 ,可 对 图 形 进行 变形 。 

(1) 缩放 : 拖 动 控制 点 可 改变 图 形 的 高 度 或 宽度 , 按 住 Shift 键 ,可 成 比例 缩放 。 

(2) 倾斜 : 当 光 标 靠 近 中 间 控 制 点 时 光标 变 为 一 个 双向 箭头 , 拖 动 双向 箭头 ,就 会 产 
生 倾斜 效果 。 

(3) 扭曲 : 拖 动 某 个 端 节点 ,就 会 产生 扭曲 效果 。 

(4) 封套 : 允许 用 户 弯曲 或 扭曲 对 象 。 封 套 是 一 个 边框 ,其 中 包含 一 个 或 多 个 对 象 。 
更 改 封套 的 形状 会 影响 该 封套 内 对 象 的 形状 ,通过 调整 封套 的 点 和 切线 手柄 来 编辑 封套 

对 一 矩形 变形 后 的 效果 如 图 12. 21 所 示 。 


BO 


原 图 形 倾斜 与 旋转 
图 12.21 矩形 变形 后 的 效果 


方法 二 ”选择 “修改 ”菜单 “变形 ”选项 一 某 个 变形 命令 ,如 图 12. 22 所 示 。 
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图 12. 22 “修改 "菜单 中 的 “变形 ”命令 
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方法 三 ”选择 “窗口 ”菜单 >“ 变形 ”命令 ,打开 “变形 ”面板 ,设置 变形 比例 旋转、 倾斜 
等 参数 ,如 图 12. 23 所 示 。 


8. 辅助 工具 的 使 用 


在 绘图 过 程 中 ,为 了 精确 绘图 ,常会 用 到 辅助 绘图 工具 ,例如 “缩放 "工具 国手 形 ” 
工具 矶 .网 络 ,标尺 、 辅 助 线 等 。 操 作 方法 为 选择 “视图 ”菜单 中 “网 络 *“ 标 尺 "“ 辅 助 线 ” 
等 命令 。 


9. 排列、 对齐、 组合 和 取消 组 合 


(1) 排列 。 选 中 对 象 ,选择 “修改 "菜单 一 “排列 ”一 某 种 排列 命令 ,改变 对 象 的 层 赫 
顺序 。 

(2) 对 齐 。 选 中 多 个 对 象 , 选 择 * 窗 口 ? 菜 单一 对齐 ”命令 ,打开 对齐? 面板 ,然后 单 
击 某 个 对 齐 方式 按钮 ,如 图 12. 24 所 示 。 
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图 12.23 “变形 ”面板 图 12.24 “对 齐 ” 面 板 


(3) 组 合 和 取消 组 合 。 使 用 “组 合 ” 命 令 , 可 将 多 个 元 素 作为 一 个 对 象 来 处 理 。 选 中 
多 个 对 象 ,选择 “修改 ?菜单 一 组合" 命令 ,将 多 个 对 象 组 合 为 一 组 。 选 中 一 组 对 象 , 选 择 
“修改 ?菜单 一 取消 组 合 ” 命 令 ,恢复 为 多 个 单个 对 象 。 

【 例 12.4】 利用 Flash 基本 工具 绘制 灯笼 ,综合 利用 填充 、 变 形 、 辅 助 等 工具 。 操 作 
步骤 如 下 。 

(1) 新 建 一 个 文档 , 单 击 “ 和 矩形 "工具 ,选择 “窗口 "菜单 一 “颜色 ”命令 ,设置 填充 为 黄 
红 放 射 性 渐变 ,笔触 颜色 为 黑色 ,高度 为 2 ,样式 为 实 线 。 在 舞台 上 ,绘制 一 个 矩形 , 单 击 
“选择 ”工具 ,选中 顶部 和 底部 的 边框 线 , 按 下 Del 键 ,进行 删 除 。 用 * 选 择 工 具 单 击 矩形 
左 侧 的 边框 线 , 然 后 按 下 Alt 键 , 拖 动 线段 , 即 复 制 此 线段 。 同 理 继续 复制 线段 , 共 复 制 
7 条 线段 。 按 下 Shift 键 ,依次 选中 这 7 条 线段 及 两 边 的 垂直 边框 ,选择 “窗口 ?菜单 一 “对 
齐 ? 命 令 ,打开 “对齐 ” 面 板 , 注 意 不 要 选中 * 相 对 于 舞台 ” 复 选 项 ,选择 “项 对 齐 ? 方 式 , 水 平 
居中 分 布 ,注意 线段 间 。 

(2) 选择 “视图 ”菜单 一 “标尺 ”命令 ,舞台 左 侧 和 上 侧 出 现 即 标尺 。 单 击 “ 选 择 ” 工 具 ， 
指向 标尺 处 , 拖 动 鼠标 , 拖 出 辅助 线 , 辅 助 线 为 亮 绿 色 线 条 , 拖 出 多 条 辅助 线 , 注 意 辅 助 线 
左右 .上 下 对 称 ,如 图 12. 25(a) 所 示 。 

(3) 选中 全 部 对 象 , 单 击 “ 任 意 变形 ”工具 .选择 选项 区 域 中 的 “封套 ”功能 键 , 按 住 左 


人 DE 
(a) 拖 出 多 条 辅助 线 (b) 进行 自由 变换 
Bl 
(c) 拖 出 方向 控制 点 (d) 制作 完成 的 灯笼 


图 12.25 绘制 灯笼 


侧 中 间 的 一 个 方形 手柄 ,向 左 拖 动 , 到 达 辅 助 线 交叉 位 置 ;将 右 侧 也 进行 这 样 的 自由 变换 ， 
如 图 12. 25(b) 所 示 。 

(4) 这 一 步 比较 关键 ,注意 图 12. 25(b) 中 特别 标示 的 方向 线 控制 点 , 按 住 这 些 控制 
点 并 拖 动 到 辅助 线 交 又 位 置 ,如 图 12. 25(c) 所 示 。 

(5) 最 后 再 添加 一 些 装 饰 ,绘制 两 个 矩形 ,作为 灯笼 的 底座 。 选 中 全 部 对 象 .选择 * 修 
改 ? 沫 单 - 盖 组 合 "命令 ,将 多 个 单个 图 形 组 合 在 一 起 。 至 此 灯笼 制作 完成 ,如 图 12. 25(d) 所 示 。 

【 例 12.5】 绘制 图 形 综合 实例 * 米 老鼠 头像 ”。 本 实例 综合 运用 了 绘图 工具 填充 与 
线条 .选择 工具 等 。 操 作 步 又 如 下 。 

(1) 利用 “椭圆 ”工具 绘制 了 若干 个 椭圆 .将 最 顶端 两 个 圆 填充 为 黑色 ,如 图 12. 26(a) 


所 示 。 ee ee 


(b) 
图 12.26 绘制 米 老鼠 头像 
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(2) 修剪 线段 ,形成 米 老鼠 头 部 的 轮廓, 如 图 12. 26Cb) 所 示 。 


(3) 绘制 直线 ,用 “选择 ”工具 将 直线 调整 为 曲线 ,利用 “椭圆” 工具 绘制 米 老鼠 的 鼻子 
和 眼睛。 


(4) 利用 “钢笔 ”工具 ,绘制 米 老 鼠 的 嘴巴 .舌头 .下巴 。 

(5) 最 后 填充 颜色 ,舌头 为 红色 ,皮肤 为 粉色 ,头发 .眼睛 、 鼻 子 为 黑色 ,如 图 12. 26(c) 
所 示 。 
12.3.2 ”位 图 操作 


1. 导入 位 图 


Flash 不 仅 可 以 绘制 各 种 形状 的 矢量 图 形 ,也 可 以 导入 多 种 格式 的 位 图 ,如 JPG 
GIF、PNG 格式 等 。 


选择 “文件 "菜单 一 “ 导 和 人 ”>“ 导 入 到 舞台 ”命令 ,直接 将 位 图 导入 到 舞台 中 。 若 选择 
“导入 到 库 ? 命 令 , 则 将 位 图 导入 到 * 库 ?面板 中 ,但 并 不 在 舞台 


出 现 。 
2. 使 用 位 图 填充 


使 用 已 导入 的 位 图 可 以 对 绘制 好 的 图 形 进行 填充 ,在 “颜色 ”面板 中 ,在 “颜色 类 型 "下 
拉 列 表 中 选择 “位 图 填充 ”时 ,已 导入 的 位 图 将 显示 在 下 方 的 列表 区 域 中 ,选择 某 个 位 图 ， 
如 图 12.27(a) 所 示 。 如 果 列 表 区 域 中 没有 所 需 的 位 图 , 单 击 “导入 ”按钮 ,弹出 “导入 到 
库 ” 对 话 框 ,如 图 12.27(b) 所 示 , 选 择 本 地 计算 机 上 的 位 图 图 像 ,并 将 其 添加 到 库 中 。 
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(a) 位 图 填充 


(b)“ 导 入 到 库 ” 对 话 框 
12.27 使 用 位 图 


3. 分 离 位 图 


在 舞台 中 导入 一 幅 位 图 后 ,不 能 直接 对 其 进行 编辑 ,例如 ,用 “ 套 索 ”工具 去 除 位 图 的 
背景 是 无 法 操作 的 ,只 有 分 离 位 图 后 才能 操作 。 操 作 步 骤 如 下 。 
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(1) 导入 一 幅 位 图 到 舞台 ,或 将 已 导 和 人 库 中 的 位 图 拖 和 人 到 舞台 中 , 单 击 当前 场景 中 的 
位 图 。 

(2) 选择 “修改 ”菜单 一 “分 离 ”" 命 令 , 或 按 下 组 合 键 Ctrl 十 B 分 离 位 图 。 分 离 后 位 图 
成 点 状 显示 ,如 图 12. 28(a) 所 示 。 

(3) 单 击 “ 套 索 "工具 辆 ,在 “工具 ”面板 的 “选项 "区域, 选中 魔术 棒 , 并 设置 魔术 棒 参 
数 , 单 击 选 中 图 像 中 的 背景 , 按 下 Del 键 删除 背景 ,如 图 12. 28(b) 所 示 。 


4. 将 位 图 转换 为 矢量 图 


将 位 图 转换 为 矢量 图 后 ,就 可 以 将 图 像 当 作 矢量 图 进行 处 理 。 与 位 图 相 比 ,一 般 矢量 
图 文件 较 小 ,因此 有 利于 减少 Flash 文件 的 大 小 。 位 图 转换 为 矢量 图 的 操作 步骤 如 下 。 

选中 当前 场景 中 的 位 图 ,选择 “修改 "菜单 一 位 图 ”一 转换 位 图 为 矢量 图 ”命令 ,弹出 
“转换 位 图 为 矢量 图 "对话 框 ,如 图 12. 29 所 示 。 
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图 12.28 ”去除 位 图 背景 图 12.29 “转换 位 图 为 矢量 图 "对话 框 
(1) 颜色 阅 值 : 输入 一 个 介 于 1 一 500 之 间 的 值 。 颜 色 阅 值 越 大 , 则 越 会 降低 转换 为 
矢量 图 后 的 颜色 数量 。 
(2) 最 小 区 域 : 输入 一 个 介 于 1 一 1000 之 间 的 值 。 用 于 设置 在 指定 像素 颜色 时 要 考 
虑 的 周围 像素 的 数量 。 


(3) 角 阔 值 : 从 下 拉 列 表 中 选择 一 个 选项 ,以 确定 是 保留 锐 边 还 是 进行 平滑 处 理 。 

(4) 曲线 拟 合 : 从 下 拉 列 表 中 选择 一 个 选项 ,用 于 确定 绘制 的 轮廓 的 平滑 程度 。 

例如 : 要 创建 最 接近 原始 位 图 的 矢量 图 形 , 输 入 如 图 12. 29 所 示 各 项 参数 即 可 。 

注意 : 如 果 位 图 颜色 很 复杂 ,如 对 于 高 清晰 度 的 照片 或 风景 图 ,将 其 转换 为 矢量 图 后 
反而 文件 变 得 更 大 了 ,这 可 采用 压缩 位 图 品质 的 方法 来 解决 。 


12.3.3 ”处 理 文本 
在 Flash 中 ,文本 和 矢量 图 形 一 样 是 必 不 可 少 的 。Flash 文本 的 特效 设计 会 为 Flash 
动画 增色 不 少 。 


Flash 文本 的 类 型 分 为 三 种 : 静态 文本 字段 .动态 文本 字段 和 输入 文本 字段 。 在 
Flash 动画 中 既 可 创建 包含 静态 文本 的 文本 块 , 即 在 创作 文档 时 确定 其 内 容 和 外 观 的 文 
本 ;也 可 创建 动态 文本 字段 显示 动态 更 新 的 文本 ,如 体育 得 分 或 股票 报价 等 ;另外 还 可 创 
建 输入 文本 字段 允许 用 户 为 表单 .调查 表 或 其 他 目的 输入 文本 。 本 小 节 内 容 主要 介绍 对 
静态 文本 的 处 理 。 


1. 输入 文本 


单 击 "文本 ”工具 国 |, 在 “属性 ”面板 中 设置 文本 属性 ,将 鼠标 移动 到 舞台 上 单 击 ,出 现 
一 个 文本 框 ,光标 在 文本 框 中 闪烁 。 此 时 输入 文本 ,如 果 需 换行 则 按 回 车 键 。 文 本 输入 完 
成 后 ,将 鼠标 在 文本 框 以 外 任意 处 单 击 ,完成 文本 输入 。 

文本 输入 完毕 后 ,如 果 想 修改 文本 ,再 次 单 击 “ 文 本 "工具 ,在 文本 框 处 单 击 文本 进行 
编辑 。 


2. 设置 文本 属性 


在 输入 文本 前 , 单 击 “文本 ?工具 ,在 “属性 ?面板 中 设置 文本 属性 ,然后 再 输入 文本 ,或 
输入 文本 后 , 单 击 “选择 ?工具 ,选中 文本 ,在 “属性 ?面板 中 设置 文本 属性 。 可 设置 文本 的 
字体 .字号 ,样式 .颜色 及 段落 的 对 齐 方式 . 边 距 、 缩 进 和 行 间 距 , 还 可 为 文本 添加 链接 路 
径 , 如 图 12. 30 所 示 。 
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图 12.30 文本 属性 设置 


还 可 以 对 文本 进行 旋转 、 缩 放 、 倾 斜 和 翻转 等 变形 。 
注意 : 可 选中 文本 块 中 的 部 分 文本 ,设置 文本 的 属性 。 


3. 将 文本 转换 为 失 量 图 形 


在 文本 框 中 输入 文本 后 ,文本 是 一 个 整体 的 文本 块 。 要 想 对 单个 文字 进行 处 理 ,可 以 
将 文本 块 中 的 文本 分 离 成 单独 的 文本 块 ,并 可 以 将 这 些 单独 的 文本 块 分 布 到 各 个 独立 的 
层 中 ,从 而 轻松 地 为 每 个 单独 的 文本 块 创建 动画 。 要 重新 调整 文字 的 形状 ,必须 将 其 转换 
为 相应 的 线条 和 填充 , 即 分 离 文本 。 2 

【 例 12.6】 将 文本 转换 为 失 量 图 形 ,如 图 12.31 所 未 。 至 善 若 水 
操作 步骤 如 下 。 文本 块 

(1) 单 击 * 文 本 "工具 ,输入 文本 , 单 击 * 选 择 "工具 , 单 击 复合 T 
文本 块 ,选中 文本 块 ,选择 “修改 ”菜单 一“ 分 离 "命令 ,或 按 至 党 若水 _ 
组 合 键 Ctrl 十 B, 每 个 字符 都 将 被 分 离 出 来 , 变 成 只 包含 一 文 二 第 一 次 分 离 , 变 成 单个 字符 
个 字符 的 文本 块 。 文 本 在 舞台 上 的 位 置 不 变 。 军 善 苦水 

(2) 选择 “修改 "菜单 一 "分离 "命令, 选 定 的 文本 就 会 被 
转换 为 形状 。 

(3) 转换 后 的 文本 就 是 矢量 图 形 , 可 对 每 一 个 文字 进行 。 图 12.31 将 文本 转换 为 
修饰 。 单 击 选 择 工具 ,选中 文本 , 单 击 * 油 漆 栖 ”工具 ,填充 人 要因 形 


再 次 分 离 , 变 成 矢量 图 形 


红 一 黄 一 蓝 一 绿 一 紫 线性 渐变 。 单 击 “ 部 分 选择 工具 , 单 击 
某 个 文字 ,修改 文字 的 路 径 。 
【 例 12.7】 制作 彩色 铁 空 特效 文字 ,如 图 12. 32 所 示 。 
操作 步骤 如 下 。 
(1) 单 击 * 文 本 ”工具 ,输入 文本 , 按 下 组 合 键 Ctrl 十 B, 将 
文本 转换 为 单个 字符 ,再 按 组 合 键 Ctrl 十 B, 将 文本 转换 为 矢 
(2) 单 击 “ 黑 水瓶 "工具 ,在 “颜色 ”面板 中 单 击 “ 笔 触 颜 
图 12.32 匀 空 特效 字 的 制作 色 设置 笔触 填充 效果 为 红 一 蓝 一 绿 一 黄 线 性 渐变 。 单 击 每 
个 文本 的 边框 ,文本 边框 呈现 彩色 的 笔触 效果 。 
(3) 选中 白色 的 填充 部 分 ,删除 ,操作 完成 。 


12.4 应 用 Flash CS5 设计 动画 


使 用 Flash 制作 动画 影片 的 流程 一 般 是 , 先 制作 动画 中 所 需要 的 各 种 元 件 , 然 后 放置 

在 舞台 中 (被 称 为 实例 ) 进 行 适当 的 组 织 编排 ,在 这 个 过 程 中 可 以 添加 声音 ,可 以 使 用 动作 

使 Flash 影片 能 够 响应 特定 事件 ,从 而 获得 交互 效果 ,影片 制作 完成 后 ,将 其 导出 为 一 个 

可 能 入 网 页 的 SWF 格式 的 文件 。 因 此 ,元 件 是 Flash 中 用 得 最 多 的 对 象 。 本 节 将 通过 一 

系列 的 实例 介绍 Flash 动画 的 制作 方法 和 技巧 。 能 够 制作 出 优秀 的 Flash 动画 效果 ,最 
主要 的 是 培养 创造 性 的 设计 能 力 。 


12.4.1 场景 元 件 与 实例 
1. 使 用 场景 


当 Flash 文件 很 复杂 时 ,需要 很 多 场景 ,并 且 每 个 场景 中 的 对 象 可 能 都 不 同 。Flash 
可 以 将 多 个 场景 中 的 动作 组 合成 一 个 连贯 的 电影 。SWF 文件 中 的 场景 将 按照 在 场景” 
面板 中 所 列 出 顺序 依次 播放 。 

(1) 添加 场景 : 选择 “插入 ”菜单 一 “场景 "命令 ,或 在 场景 "面板 中 单 击 “ 添 加 场景 ” 
按钮 。 

(2) 删除 场景 : 在 “场景 "面板 中 单 击 “ 删 除 场景 "按钮 。 

2. 元 件 和 实例 


元 件 是 存放 在 库 中 的 可 反复 取 用 的 图 形 、 动 画 、 按 钮 和 音频 。 当 用 户 创建 一 个 元 件 
时 ,元 件 就 存储 在 文件 的 “ 库 ” 面 板 中 ,“ 库 ”面板 对 元 件 进行 有 效 的 组 织 和 管理 ,还 可 建立 
文件 夹 ,将 元 件 分 类 存放 在 文件 夹 中 。 将 元 件 从 库 拖 入 舞台 ,就 生成 了 一 个 实例 。 元 件 的 
类 型 有 图 形 、 影 片 剪辑 、 按 钮 三 种 。 

(1) 图 形 : 可 反复 取 用 的 图 片 ,用 于 构建 动画 主 时 间 轴 上 的 内 容 。 一 般 只 含有 一 帧 
静止 图 片 。 不 能 对 它 添加 交互 行为 和 声音 控制 。 


(2) 影片 剪辑 : 可 反复 取 用 的 一 段 小 动画 。 可 独立 于 主 时 间 轴 进行 播放 。 可 以 用 
ActionScript 语言 进行 控制 ,但 不 能 对 鼠标 事件 做 出 响应 。 
(3) 按钮 : 用 于 创建 动画 的 交互 控制 按钮 。 可 响应 事件 ,添加 交互 动作 。 


3. 创建 元 件 


创建 元 件 的 方法 比较 多 ,下 面 介绍 常用 的 三 种 方法 。 
方法 一 ”选中 场景 中 的 对 象 ,选择 “修改 ”菜单 ~“ 转 换 为 元 件 ” 命 令 , 或 按 下 快捷 键 F8， 
弹出 “转换 为 元 件 ” 对 话 框 ,在 此 输入 元 件 名 称 ,选择 类 型 , 单 击 “ 确 定 ” 按 钮 ,如 图 12. 33 所 示 。 
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图 12.33 “转换 为 元 件 ” 对 话 框 


方法 二 ”选择 “插入 ”菜单 一“ 新 建 元 件 " 命 令 , 或 单 击 “ 库 ”面板 下 方 的 “新 建 元 件 " 按 
钮 国 , 弹 出 “新 建 元 件 ”" 对 话 框 ,在 此 输入 名 称 和 选择 类 型 , 单 击 “ 确 定 ” 按 钮 ,进入 到 元 件 的 
编辑 界面 。 

方法 三 Flash 有 一 个 公用 库 。 选 择 “ 窗 口 " 菜 单一 “公用 库 ” 一 “声音 或 按钮 或 类 " 命 
令 , 打 开 * 公 用 库 ? 面 板 后 ,选中 元 件 , 拖 入 到 当前 文档 的 “ 库 ? 面 板 中 。 


4. 编辑 和 使 用 元 件 


(1) 编辑 元 件 : 打开 * 库 ?面板 ,选中 某 个 元 件 双击 ,进入 到 元 件 的 编辑 状态 ,或 在 舞 
台 上 双击 实例 ,进入 到 元 件 的 编辑 状态 。 

(2) 使 用 元 件 : 创建 的 元 件 会 被 保存 在 “ 库 ” 面 板 中 。 选 择 “ 窗 口 ” 菜 单一 “ 库 ” 命 令 ， 
或 按 下 组 合 键 Ctrl 十 L 或 快捷 键 F11, 打 开 * 库 ?面板 ,选中 元 件 拖 至 舞台 中 。 

(3) 实例 的 应 用 : 元 件 拖 放 到 舞台 中 后 即 称 为 实例 。 在 “属性 ”面板 中 ,可 对 实例 进 
行 相应 的 属性 设置 ,例如 设置 实例 名 称 ,行为 .位 置 和 大 小 、 颜 色 、 动 画 播 放 方式 等 ,如 
图 12. 34 所 示 。 


图 12.34 设置 实例 的 属性 


12.4.2 ” 帧 与 关键 帧 
Flash 动画 是 由 多 帧 组 成 的 。 帧 就 是 动画 在 播放 过 程 中 ,不 同时 间 内 动画 内 容 的 载 
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体 。 帧 分 为 普通 帧 ,关键 帧 .空白 关键 帧 ,如 图 12. 35 所 示 。 


图 12.35 帧 及 关键 帧 


(1) 关键 帧 : 定义 了 动画 变化 的 帧 ,也 可 以 说 是 包含 了 帧 动作 的 帧 。 在 时 间 轴 中 是 
一 个 实心 的 小 黑 点 。 

(2) 空白 关键 帧 : 没有 内 容 的 关键 帧 。 在 时 间 轴 上 是 一 个 空心 的 小 圆圈 。 

(3) 普通 帧 : 又 称 为 相同 帧 ,与 前 一 个 关键 帧 的 内 容 相同 ,是 灰色 的 帧 。 

(4) 过 渡 帧 : 两 个 关键 帧 之 间 定义 了 动画 的 帧 , 它 使 得 动画 过 程 更 流畅 。 


12.4.3 图 层 
图 层 用 于 有 效 地 组 织 电影 元 素 ,使 元 素 之 间 不 至 于 相互 干扰 ,如 图 12. 36 所 示 。 


1. 图 层 的 分 类 
(1) 普通 层 : 当 创建 一 个 新 的 Flash 文档 后 , 它 就 包含 一 个 普通 层 , 它 是 Flash 中 应 


用 最 多 的 图 层 。 
(2) 引导 层 : 利用 引导 层 可 以 制作 沿路 径 运动 的 动画 。 
(3) 遗 音 层 : 遮 住 下 面 层 的 内 容 , 透 过 建立 的 矢量 图 形 可 以 看 见 下 面 图 层 的 内 容 。 


2. 图 层 的 操作 
(1) 插入 图 层 : 在 时 间 轴 左下 方 单 击 “ 插 入 图 层 ” 按 钮 辐 , 就 添加 了 一 个 普通 层 。 
(2) 改变 图 层 的 属性 : 选中 图 层 , 右 击 , 在 弹出 的 快捷 菜单 中 选择 “属性 ”命令 ,弹出 


“图 层 属性 ”对 话 框 ,在 此 设置 图 层 的 属性 ,如 图 12. 37 所 示 。 
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图 12.36 图 层 类 型 


图 12.37 “图 层 属性 ”对 话 框 


| | 第 1e 章 利用 Flasn 设 计 网 页 动画 ] 信 


(3) 插入 图 文件 夹 : 将 图 层 分 类 放 在 文件 夹 进行 组 织 管理 。 

(4) 不 需要 图 层 时 , 单 击 “ 删 除 图 层 ” 按 钮 。 

(5) 图 层 的 显示 或 隐藏 , 单 击 层 , 单 击 眼睛 图 标 位 置 ,出 现 红 又, 表示 隐藏 ,出 现 黑色 
圆 点 表示 显示 。 

(6) 图 层 的 锁定 : 单 击 层 , 单 击 需 锁定 层 下 方 ,出 现 锁 的 标志 ,表示 锁定 层 ,黑色 圆 点 
表示 解锁 。 


12.4.4 创建 动画 
用 户 通过 改变 连续 帧 的 内 容 来 实现 动画 ,例如 穿梭 移动 、 放 大 或 缩小 旋转、 变色 、 淡 
入 淡出 以 及 改变 形状 等 。 


有 三 种 方法 可 以 在 Flash 中 创建 动画 序列 ,分 别 是 创建 传统 补 间 动 画 、 创 建 补 间 动 
画 、 创 建 补 间 形 状 。 


1. 创建 帧 并 帧 动画 


要 创建 帧 并 帧 动画 ,必须 为 每 一 帧 都 定义 关键 帧 ,并 且 修改 关键 帧 中 的 内 容 。 
【 例 12.8】 制作 帧 并 帧 动画 "转动 的 钟表 ”, 如 图 12. 38 所 示 。 制 作 过 程 如 下 。 


el pl 


图 12.38 转动 的 钟表 
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(1) 新 建 一 个 文档 ,绘制 一 个 钟表 的 图 形 , 钟 表 的 边框 采用 红 一 黑 线性 渐变 ,将 当前 
图 形 所 在 的 图 层 重 命名 为 "背景 ”锁定 该 层 。 

(2) 单 击 时 间 轴 左下 角 的 “新 建 图 层 ? 按 钮 同 , 新 建 一 个 图 层 , 单 击 * 直 线 工 具 绘制 一 
个 指针 ,选中 指针 , 按 快捷 键 F8, 将 指针 转换 为 元 件 ,类 型 为 “图 形 ”“ 名 称 ” 为 “指针 ”。 

(3) 单 击 “ 任 意 变 形 " 工 具 , 将 指针 变形 控制 点 移动 到 指针 的 最 底 端 。 

(4) 单 击 当前 关键 帧 后 一 个 空白 帧 ,插入 一 个 关键 帧 ,多 次 重复 此 步 又 ,插入 12 个 关 
键 帧 ,一 共 12 个 关键 帧 。 

(5) 修改 每 个 关键 帧 的 状态 。 选 择 “ 窗 口 " 菜 单一 “变形 ”命令 ,打开 “变形 ”面板 。 
中 第 2 个 关键 帧 ,在 “变形 ”面板 中 设置 旋转 30 度 , 按 回 车 键 ;选中 第 三 个 关键 帧 ,在 “ 
形 ” 面 板 中 设置 旋转 60 度 , 继 续 选 中 后 面 的 关键 帧 ,以 此 类 推 ,旋转 度 递增 30 度 。 到 最 后 
一 个 关键 帧 ,旋转 角度 为 360 度 , 刚 好 旋转 一 周 。 至 此 动画 制作 完成 。 


2. 创建 传统 补 间 动 画 


【 例 12.9】 利用 传统 补 间 动 画 制作 跳动 的 字符 ,如 图 12. 39 所 示 , 效 果 为 字符 沿 镜 
面 垂直 向 上 移动 。 制 作 过 程 如 下 。 


MIRROR 


分 离 文本 块 为 单个 字符 ， 下 M 字 符 共 有 3 个 关键 帧 ,修改 第 20 帧 (第 2 个 关 
元 件 , 双 击 字符 进入 编辑 状态 键 帧 ) 的 状态 ,垂直 向 上 移动 一 段 距离 


MIRR 
MIRROR OR 


选中 多 个 字符 ,复制 ,粘贴 ,水 平 翻转 并 Flash 动 画 播放 效果 
旋转 180 度 ,修改 Alpha 值 为 50% 


图 12.39 ”跳动 的 字符 


(1) 新 建 一 个 文档 ,背景 颜色 为 亮 蓝 色 (#0099FF), 单 击 “ 和 矩形 ”工具 ,在 “属性 ”面板 
中 设置 “填充 ”为 深蓝 色 ( #000066) ,绘制 一 个 矩形 ,占据 了 舞台 的 下 半 部 分 ,将 此 图 层 命 
名 为 “背景 层 ”, 锁 定 此 层 。 

(2) 新 建 一 层 .将 此 层 命名 为 文本 层 , 单 击 “ 文 本 ”工具 ,设置 文本 颜色 为 黄色 
( 井 FFFF00) ,字体 为 Arial Black, 字体 大 小 为 70, 输 入 文本 “MIRROR”。 按 组 合 键 
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Ctrl 十 了 B 将 文本 块 打 散 为 单个 字符 ,分 别 选中 每 一 个 字符 , 按 快捷 键 F8 ,将 文本 转换 为 元 
件 ,“ 类 型 " 均 为 “影片 剪辑 ”",“ 名 称 ” 分 别 是 : M\I、R、O、R1、R2。 

(3) 选择 “视图 ”菜单 一 “标尺 ”命令 ,将 光标 指向 水 平 标尺 处 , 拖 动 鼠 标 ,出 现 一 条 
水 平 辅助 线 ,辅助 线 位 于 舞台 的 上 方 , 此 水 平 辅助 线 的 位 置 是 字母 垂直 运动 到 上 方 的 
位 置 。 

(4) 双击 字母 M, 进 入 到 影片 剪辑 的 编辑 状态 ,在 第 20 帧 和 第 40 帧 处 插入 关键 帧 ， 
分 别 在 第 1 帧 至 第 20 帧 ,第 21 帧 至 第 40 帧 时 间 轴 上 的 任 一 帧 处 右 击 ,在 弹出 的 快捷 菜 
单 中 选择 “创建 传统 补 间 ” 命 令 。 

(5) 返回 场景 ,双击 字母 I, 进 入 到 影片 剪辑 的 编辑 状态 。 在 第 4 帧 .第 24 帧 .第 
44 帧 ,插入 关键 帧 ,在 “属性 ?面板 中 设置 补 间 为 动画 。 单 击 第 24 帧 ,修改 第 24 帧 中 字母 
向 上 移动 到 辅助 线 位 置 。 

(6) 返回 场景 ,双击 字母 R, 进 入 到 影片 剪辑 的 编辑 状态 ,在 第 7 帧 .第 27 帧 、 
第 47 帧 插入 关键 帧 , 单 击 第 27 帧 ,修改 第 27 帧 中 字母 移动 到 辅助 线 位 置 。 其 他 字母 的 
修改 以 此 类 推 , 但 每 一 个 影片 剪辑 的 第 2 个 关键 帧 依次 推 后 3 帧 。 

(7) 返回 到 场景 后 , 单 击 文本 层 的 关键 帧 ,将 这 几 个 字母 全 部 选中 ,选择 “编辑 "菜单 一 
“直接 复制 "命令 ,自选 择 “ 修 改 " 菜 单一 “变形 ”一 “水 平 翻转 ”命令 ,向 下 移动 字母 的 位 置 ， 
在 “属性 ”面板 中 设置 Alpha 值 为 50%, 按 下 组 合 键 Ctrl 十 Enter 测试 影片 效果 , 即 看 到 字 
母 呈 镜像 依次 上 下 跳动 的 动画 。 

3. 创建 补 间 动画 


补 间 动画 是 Flash CS5 在 原来 的 基础 上 新 增加 的 动画 功能 ,是 通过 为 不 同 帧 中 的 对 
象 属性 指定 不 同 的 值 而 创建 的 动画 。Flash 计算 这 两 个 帧 之 间 该 属性 的 值 。 

补 间 范围 是 时 间 轴 中 的 一 组 帧 ,其 中 的 某 个 对 象 具有 一 个 或 多 个 随时 间 变 化 的 属性 。 
补 间 范围 在 时 间 轴 中 显示 为 具有 蓝 色 背景 的 单个 图 层 中 的 一 组 帧 。 

属性 关键 帧 是 在 补 间 范 围 中 为 补 间 目 标 对 象 显 式 定义 一 个 或 多 个 属性 值 的 帧 。 这 些 
属性 可 包括 位 置 .Alpha 值 (透明度) 、 色 调 等 。 所 定义 的 每 个 属性 都 有 它 自己 的 属性 关 
键 帧 。 

注意 : 补 间 动画 和 传统 补 间 之 间 的 差异 是 传统 补 间 使 用 关键 帧 。 关 键 帧 是 其 中 显示 
对 象 的 新 实例 的 帧 。 补 间 动 画 只 能 具有 一 个 与 之 关联 的 对 象 实例 ,并 使 用 属性 关键 帧 而 
不 是 关键 帧 。 

【 例 12. 10〗 弹跳 的 篮球 动画 如 图 12. 40 所 示 ,制作 过 程 如 下 。 

(1) 新 建 一 个 文档 , 单 击 “椭圆 ?工具 ,设置 “笔触 ?颜色 为 “无 ", 填 充 ” 颜 色 为 由 红 至 
深 红色 “ 径 向 渐变 ”。 绘 制 一 个 圆 形 , 单 击 “直线 ?工具 ,设置 笔触 颜色 为 黑色 ,宽度 为 1 像 
素 , 线 型 为 实 线 , 在 圆 形 图 形 中 绘制 多 条 线段 , 单 击 “ 选 择 " 工 具 , 将 线条 调整 为 曲线 ,选中 
整个 图 形 ,选择 “修改 ?菜单 ~” 转换 为 元 件 ” 命 令 ,将 其 转换 为 元 件 。 

(2) 在 时 间 轴 上 ,在 第 10 帧 处 右 击 ,在 弹出 的 快捷 菜单 中 选择 “插入 帧 ”命令 ， 
第 1 帧 至 第 10 帧 处 任意 位 置 右 击 ,在 弹出 的 快捷 菜单 中 选择 “创建 补 问 动画 ”命令 。 

(3) 单 击 第 10 帧 处 ,然后 移动 篮球 到 另 一 个 位 置 ,在 画布 中 出 现 一 条 绿色 的 线段 ,这 
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图 12.40 弹跳 的 篮球 


条 线段 就 是 Flash CS5 补 间 动 画 的 运动 路 径 , 时 间 轴 第 10 帧 处 出 现 一 个 黑色 萎 形 标识 ， 
如 图 12. 40 所 示 ,此 标识 即 为 属性 关键 帧 。 

(4) 在 第 40 帧 插入 帧 ,分 别 单 击 第 20 帧 .第 30 帧 .第 40 帧 处 ,移动 篮球 至 不 同 的 位 
置 ,形成 了 一 条 绿色 折线 ,此 折线 即 为 图 形 的 运动 路 径 。 

(5) 用 “选择 ”工具 或 “部 分 选择 ”工具 对 折线 进行 曲线 的 调整 。 

(6) 按 组 合 键 Enter 十 Ctrl 可 测试 图 形 的 运动 效果 。 


4. 引导 动画 


运动 引导 层 允 许 用 户 绘制 一 条 曲线 作为 动画 路 径 , 动 画 中 的 实例 、 组 合体 或 文本 块 将 
沿 着 这 条 曲线 运动 。 用 户 可 以 将 多 个 层 链接 到 一 个 运动 引导 层 上 ,使 多 个 对 象 按 照相 同 
的 路 径 运动 。 一 个 链接 到 运动 引导 层 的 普通 层 将 变 成 被 引导 层 。 

【 例 12.11】 沿路 径 移 动 的 动画 “飞舞 的 小 蜜蜂 ”, 如 图 12. 41 所 示 。 制 作 过 程 如 下 。 

(1) 新 建 一 个 文档 ,选择 “文件 "菜单 一 “导入 到 舞台 ”命令 ,导入 一 幅 花 卉 图 sj136. jpg 
作为 背景 图 ,命名 此 层 名 称 为 “背景 ”锁定 此 层 。 

(2) 选择 “插入 "菜单 一 “新 建 元 件 "命令 ,弹出 “新 建 元 件 ” 对 话 框 ,输入 “元 件 ” 名 称 为 
“蜜蜂 ”,“ 类 型 "为 “影片 剪辑 ”, 单 击 “ 确 定 ” 按 钮 ,进入 到 影片 剪辑 的 编辑 状态 。 

(3) 用 “绘图 "工具 绘制 蜜蜂 的 身体 , 重 命 名 此 层 为 body。 新 建 一 层 , 命 名 为 right, 单 
击 “ 铅 笔 ” 工 具 绘 制 蜜蜂 的 翅膀 。 单 击 “ 选 择 ” 工 具 , 选 中 翅膀 . 按 快捷 键 F8, 将 此 图 形 转 换 
为 元 件 ,“ 名 称 ” 为 “翅膀 ”,“ 类 型 "为 “图 形 ”, 如 图 12. 41 所 示 。 新 建 一 层 ,命名 为 left, 将 
“翅膀 "元件 拖 入 到 蜜蜂 身体 的 左 侧 ,选择 “修改 "菜单 一 “变形 ”选项 一 “水 平 翻转 ”命令 , 放 
置 左 侧 翅膀 。 

(4) 调整 层 的 顺序 ,此 时 共有 三 层 ,body 层 在 最 上 方 ,下 面 两 层 为 left 和 right, 将 蜜 
蜂 排 列 整齐 。 选 中 left 层 , 单 击 第 5 帧 .插入 关键 帧 。 选 中 翅膀 实例 , 单 击 * 任 意 变形 ” 工 
具 , 单 击 * 选 项 区域“ 旋转 与 倾斜 ?功能 键 ,变形 此 实例 。 右 击 第 1 帧 ,在 弹出 的 快捷 菜单 
中 选择 “创建 传统 补 间 ” 命 令 。 
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蜜蜂 影片 剪辑 密 蜂 影片 剪辑 
第 1 个 关键 帧 第 2 个 关键 帧 : 翅膀 挥动 


在 场景 中 第 3 个 关键 由 
密 蜂 沿路 径 方向 


Flash 影 片 发 布 测试 
图 12.41 飞舞 的 蜜蜂 的 制作 过 程 


(5) 选中 right 层 , 与 上 一 步 相同 ,创建 传统 补 间 。 此 时 拖 动 播放 磁头 ,可 看 到 两 边 翅 
膀 上 下 扇 动 。 单 击 场景 1 的 链接 ,返回 场景 。 

(6) 新 建 一 层 , 将 其 命名 为 “蜜蜂 ”, 按 下 快捷 键 F11 ,打开 * 库 ?面板 ,将 蜜蜂 影片 剪辑 
元 件 拖 入 到 场景 ,放置 在 舞台 右 下 方 外 侧 。 

(7) 在 “蜜蜂 " 层 右 击 , 在 弹出 的 菜单 中 选择 “添加 传统 运动 引导 层 "命令 , 即 新 建 引导 
层 , 单 击 “ 钢 笔 ” 工 具 , 绘 制 一 条 曲线 ,曲线 路 径 经 过 画面 上 的 花 打 ,锁定 引导 层 。 

(8) 右 击 第 50 帧 ,在 弹出 的 快捷 菜单 中 选择 "插入 帧 ”命令 。 单 击 蜜蜂 层 的 第 1 帧 ， 
将 蜜蜂 实例 拖 动 至 引导 线 上 , 单 击 “任意 变形 "工具 ,旋转 蜜蜂 为 沿路 径 方 向 。 单 击 第 10 
帧 ,插入 关键 帧 ,将 蜜蜂 移动 到 第 1 个 花 打 上 , 单 击 “任意 变形 "工具 ,旋转 蜜蜂 为 沿路 径 方 
向 , 右 击 第 1 帧 ,在 弹出 的 快捷 菜单 中 选择 “创建 传统 补 间 ? 命 令 。 

(9) 单 击 第 15 帧 ,插入 关键 帧 ; 单 击 第 25 帧 ,插入 关键 帧 ;移动 蜜蜂 到 第 2 个 花 杀 ， 
旋转 蜜蜂 为 沿路 径 方 向 ; 右 击 第 15 帧 ,在 弹出 的 快捷 菜单 中 选择 “创建 传统 补 间 ” 命 令 。 

(10) 单 击 第 30 帧 ,插入 关键 帧 ; 单 击 第 40 帧 ,插入 关键 帧 ;旋转 蜜蜂 为 沿路 径 方向 ， 
移动 蜜蜂 到 第 3 个 花 打 , 右 击 第 30 帧 ,在 弹出 的 快捷 菜单 中 选择 “创建 传统 补 间 ” 命 令 ; 单 
击 第 45 帧 ,插入 关键 帧 ; 单 击 第 50 帧 ,插入 关键 帧 ;将 蜜蜂 移 到 舞台 外 ,旋转 蜜蜂 为 沿路 
径 方向 , 右 击 第 45 帧 ;在 弹出 的 快捷 菜单 中 选择 “创建 传统 补 间 ” 命 令 。 

(11) 按 回 车 键 测试 动画 运行 效果 。 
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5. 创建 补 间 形 状 


使 用 补 间 形 状 可 以 创建 和 变形 相 类 似 的 效果 ,以 某 个 形状 出 现 , 随 着 时 间 推 移 ,最 开 
始 的 形状 逐渐 变形 成 另 一 个 形状 。 另 外 可 通过 添加 形状 提示 点 ,控制 补 间 形 状 渐变 的 结 
果 。 操 作 步 又 如 下 : 选择 “修改 ”菜单 一 “形状 ”>“ 添 加 形状 提示 点 ”命令 。 设 置 形状 的 位 
置 . 大 小 、 颜 色 也 可 产生 渐变 效果 。 

【 例 12.12】 制作 表现 翻 书 效果 的 形状 渐变 动画 , 书 的 内 页 慢 慢 地 翻 过 来 , 如 
图 12. 42 所 示 ,制作 过 程 如 下 。 


制作 封面 和 封底 及 内 侧 连 接 处 书 内 侧 第 1 个 关键 帧 书 内 侧 第 2 个 关键 帧 


书 内 侧 第 3 个 关键 由 书 内 侧 第 4 个 关键 帧 书 内 侧 第 5 个 关键 帧 书 内 侧 第 6 个 关键 由 
图 12.42 翻 书 效果 制作 过 程 


(1) 新 建 一 个 文档 , 单 击 “ 和 矩形? 工具 ,设置 填充 颜色 为 深蓝 色 (#000066) ,绘制 一 个 

矩形 , 按 快捷 键 F8, 将 图 形 转换 为 元 件 , 名 称 为 * 书 册 ”“ 类 型 "为 “影片 剪辑 ”, 双 击 和 矩形 ， 
入 影片 剪辑 的 编辑 状态 , 重 命 名 此 层 为 “封面 ”。 

(2) 新 建 层 , 并 命名 为 “封面 图 ” ,选择 “文件 ”菜单 “导入 到 舞台 ”命令 ,选择 位 图 文 
件 065. jpg, 单 击 “ 缩 放 ” 工 具 将 图 像 大 小 缩放 到 合适 尺寸 。 

(3) 插入 一 层 , 并 命名 为 “封底 ,复制 封面 的 矩形 ,将 其 粘贴 到 此 层 , 并 移动 到 封底 的 
右 侧 顶端 对 齐 。 再 插入 一 层 ,绘制 一 个 细 长 的 矩形 ,填充 为 黑 一 白 线 性 渐变 , 置 于 封面 和 
封底 的 中 间 ,作为 书 冰 。 

(4) 插入 一 层 , 将 其 命名 为 “封底 图 ”, 选 择 * 文 件 ? 菜 单一 导入 到 舞台 ”命令 ,选择 位 
图 文件 smile3. gif, 用 “缩放 ”工具 缩放 到 合适 尺寸 。 在 时 间 轴 上 , 按 下 Shift 键 右 击 以 上 
各 层 的 第 55 帧 ,在 弹出 的 菜单 中 选择 “插入 帧 "命令 。 

(5) 插入 一 层 ,将 其 命名 为 “内 页 层 ”, 绘 制 一 个 矩形 ,颜色 为 白色 , 比 封底 略 小 ,利用 
此 层 的 补 间 形 状 制作 翻 书 效果 。 

(6) 书 在 翻动 的 过 程 会 发 生 形状 变化 。 单 击 第 5 帧 ,插入 关键 帧 (第 2 个 关键 帧 ) , 单 
击 “ 选 择 ” 工 具 指 向 矩形 上 下 直线 边 , 拖 动 将 其 变 成 曲线 ,然后 单 击 “ 任 意 变形 "工具 ,缩小 
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矩形 的 宽度 。 

(7) 单 击 第 15 帧 ,插入 第 3 个 关键 帧 , 单 击 “ 选 择 ” 工 具 改 变 书 边 的 弯曲 度 , 并 用 “ 任 
意 变 形 ” 工 具 缩 放 和 倾斜 书 内 页 。 选 择 “ 修 改 ” 菜 单一 “形状 ”一 “添加 形状 提示 ”命令 ,分 别 
插入 4 个 形状 提示 ,位 于 书 内 页 的 4 个 边 角 。 

(8) 单 击 第 35 帧 插入 第 4 个 关键 帧 ,选中 图 形 ,选择 "修改 "菜单 -变形 ”~* 水 平 翻 
转 ?命令 ,并 将 翻转 后 的 图 形 移动 到 左 侧 封面 处 ,在 “属性 ?面板 中 将 填充 颜色 改 为 浅 红色 
(#FFCCCC) ,修改 形状 提示 的 位 置 (注意 与 上 一 个 关键 帧 相对 应 ,这 一 步 很 关键 ) 。 

(9) 单 击 第 45 帧 .第 50 帧 分 别 插入 关键 帧 。 在 第 45 帧 ,用 “任意 变形 "工具 变形 图 
形 ,填充 颜色 为 浅 红色 (上 #FFCCCC) ,第 50 帧 与 第 1 帧 形状 相同 ,颜色 为 浅 红色 。 

(10) 右 击 每 两 个 关键 帧 之 间 某 个 位 置 ,分 别 在 弹出 的 快捷 菜单 中 选择 “创建 补 间 形 
状 "命令 。 

(11) 单 击 “ 场 景 ”链接 ,返回 场景 , 按 快捷 键 F11, 打 开 “ 库 ”面板 ,将 相册 拖 入 到 场景 。 
按 下 组 合 键 Ctrl 十 Enter, 测 试 Flash 效果 ,可 看 到 书页 很 流畅 地 翻 过 。 


6. 创建 遮 单 动画 


遮 单 层 就 是 将 下 面 的 层 全 部 遮 住 。 在 遮 童 层 中 添加 形状 ,形状 类 似 于 洞 , 透 过 洞 可 以 
看 到 下 面 层 的 内 容 。 链 接 到 遮 单 层 的 普通 层 就 是 被 谈 电 层 。 利 用 “ 遮 单 ”效果 ,可 以 制作 
许多 特效 ,如 水 波 、 万 花 简 放大镜、 望远镜 ,探照灯 等 。 

【 例 12.13】 创建 遮 音 动画 ,动画 效果 为 地 球 不 停 地 旋转 ,同时 还 有 星空 光芒 四 射 ， 
如 图 12. 43 所 示 。 制 作 过 程 如 下 。 

(1) 新 建 一 个 文档 ,背景 为 白色 ,新 建 一 个 元 件 , “名称 ”为 地图”,“ 类 型 "为 图 形 ”， 
选择 “文件 菜单“* 导 入 到 舞台 ”命令 ,导入 一 幅 位 图 地 球 .jpg; 复 制 、. 粘 贴 该 位 图 ,顶端 对 
齐 , 按 组 合 键 Ctrl 十 B, 分 离 位 图 , 单 击 “ 套 索 ” 工 具 , 单 击 “ 选 项 ”区 域 中 “魔术 棒 ” 功 能 键 ， 
单 击 位 图 中 的 黑色 区 域 , 按 Del 键 删除 .去除 黑色 背景 。 

(2) 在 “属性 ”面板 中 ,修改 文档 背景 为 黑色 。 新 建 一 个 元 件 ,“ 名 称 ” 为 地球 ”,“ 类 
型 为 “影片 剪辑 ”, 单 击 “ 确 定 ” 按 钮 ,进入 元 件 编辑 状态 。 

(3) 下 面 利用 遮 音 层 制 作 动画 。 将 第 1 层 命 名 为 暗 地 图 ,打开 * 库 ?面板 ,将 地 图 元 件 
拖 和 人 到 舞台 中 ,选中 地 图 实例 , 单 击 “ 属 性 ”面板 中 “色彩 效果 ”选项 组 的 “样式 ?下 拉 菜 单 ， 
选中 “高 级 "命令 ,在 弹出 的 对 话 框 中 设置 相关 的 参数 : 红 为 21%, 绿 为 25%, 蓝 为 29%， 
RR 为 0,G 为 81,B 为 92, 此 时 图 形 颜 色 为 暗 绿 色 。 

(4) 新 建 一 层 , 将 其 命名 为 “ 圆 1”, 单 击 “ 椭 圆 ” 工 具 , 按 下 Shift 键 ,绘制 一 个 100X 
100( 像 素 ) 的 圆 形 。 打 开 “ 对 齐 ” 面 板 , 单 击 “ 相 对 于 有 舞台 ”按钮 ,使 图 形 与 舞台 居中 对 齐 。 
选中 “ 圆 1 图 层 ,在 “图 层 名 称 ” 位 置 右 击 .在 弹出 的 快捷 菜单 中 选择 “ 遮 单 层 "命令 ,结果 
为 只 显示 地 图 圆 形 部 分 ,其 他 部 分 已 被 遮 住 。 

(5) 两 个 图 层 都 有 一 个 锁 标 志 , 单 击 锁 标志 ,取消 锁定 。 单 击 “ 暗 地 图 ”图 层 的 
第 40 帧 ,插入 关键 帧 。 在 第 1 个 关键 帧 处 ,地 图 在 圆 的 最 左 侧 ,在 第 40 帧 ,将 地 图 移动 到 
圆 的 最 右 侧 。 右 击 第 1 帧 ,在 弹出 的 快捷 菜单 中 选择 “创建 传统 补 间 ? 命 令 。 

(6) 新 建 一 层 , 命 名 为 “地 图 ”, 将 地 图 元 件 拖 和 人 到 舞台 中 。 新 建 一 层 , 命 名 为 “ 圆 2”， 
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图 12.43 旋转 的 地 球 制作 过 程 


绘制 一 个 尺寸 100X100( 像 素 ) 的 圆 , 与 舞台 居中 对 齐 。 在 “图 层 名 称 ” 位 置 右 击 , 选 择 遮 
单 层 。 同 理 选 中 * 地 图 层 ”。 单 击 图 层 位 置 的 锁 标志 ,取消 锁定 。 单 击 第 40 帧 插入 一 个 关 
键 帧 ,第 1 帧 地 图 在 圆 的 最 右 侧 ,到 第 40 帧 地 图 在 圆 的 最 左 侧 。 右 击 第 1 帧 ,在 弹出 的 快 
捷 菜 单 中 选择 “创建 传统 补 间 ” 命 令 。 

(7) 插入 一 层 . 绘 制 一 个 尺寸 100X100( 像 素 ) 的 圆 , 与 舞台 居中 对 齐 , 设 置 “ 填 充 ” 为 
“ 径 向 渐变 ”: # 划 006666(Alpha:0) 至 #006666(Alpha:100)。 至 此 旋转 的 地 球 制作 完成 。 
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(8) 下 面 制作 星空 四 射 效果 。 返 回 场景 ,绘制 一 个 水 平和 矩形 条 ,尺寸 100X3( 像 素 )， 
“填充 ?为 由 红 ( 井 FF0000) 一 橘 黄 (并 FFCC00) 一 黄 (#FFFF00) 线 性 渐变 。 选 中 图 形 , 按 
快捷 键 F8, 将 其 转换 为 元 件 , 元 件 “ 名 称 ” 为 “光芒 ”,“ 类 型 ”为 “图 形 ”。 双 击 进入 光芒 元 件 
编辑 状态 ,选中 图 形 ,位 置 x、y 分 别 为 100,0。 单 击 “ 任 意 变 形 " 工 具 , 将 变形 点 移动 到 舞 
台中 间 1 厘米 处 ,然后 打开 “变形 ”面板 ,设置 旋转 角度 为 10 度 , 连 续 单 击 “ 重 制 选区 和 变 
形 ” 按 钮 。 形 成 光芒 的 形状 ,选中 所 有 的 图 形 , 进 行 组 合 操作 。 

(9) 返回 场景 ,新 建 一 个 元 件 ,“ 名 称 ” 为 “光芒 四 射 ”",“ 类 型 ”为 “影片 剪辑 ”。 打 开 
“ 库 ? 面 板 , 将 光芒 元 件 拖 入 到 第 1 层 , 与 舞台 居中 对 齐 。 新 建 一 层 ,将 光芒 元 件 再 次 拖 入 
到 第 2 层 ,与 舞台 居中 对 齐 。 选 择 “ 修 改 " 菜 单一 “变形 ”一 “水 平 翻转 ”命令 , 单 击 第 20 帧 ， 
插入 关键 帧 ; 右 击 第 1 帧 ,在 弹出 的 快捷 菜单 中 选择 “创建 传统 补 间 ? 命 令 ,在 “属性 ?面板 
中 设置 “旋转 ”, 逆 时 针 ,1 次 。 右 击 第 2 层 ,在 弹出 的 快捷 菜单 中 ,选择 “ 遮 单 层 ” 命 令 , 星 
空 四 射 效 果 完 成 。 

(10) 返回 场景 ,在 第 1 层 打 开 * 库 ?面板 ,将 地 球 影片 剪辑 元 件 拖 人 到 场景 ,与 舞台 居 
中 对 齐 。 新 建 第 2 层 , 将 星空 四 射影 片 剪辑 拖 人 到 场景 ,与 舞台 居中 对 齐 ,操作 完成 。 

(11) 测试 动画 。 


7. 按钮 的 制作 


按钮 可 以 显示 为 图 像 或 动画 ,分 别 响应 不 同 的 鼠标 状态 , 当 用 户 使 用 鼠标 时 产生 单 
击 、 按 下 或 悬 停 在 按钮 之 上 等 动作 时 ,按钮 都 会 有 不 同 的 显示 效果 。 要 使 按钮 在 电影 中 产 
生 交 互 , 可 将 按钮 符号 的 实例 放置 在 舞台 上 ,然后 给 实例 分 配 相 应 的 动作 。 

【 例 12.14】 制作 网 页 中 的 立体 按钮 。 动 画 效果 是 : 当 鼠 标 经 过 按钮 时 ,球体 跳动 ， 
链接 的 文字 出 现 , 单 击 后 进入 到 链接 页 面 ,如 图 12. 44 所 示 。 制 作 过 程 如 下 。 

(1) 网 页 界面 设计 。 新 建 一 个 文档 ,设置 尺寸 为 1002X 615( 像 素 ),“ 背 景 ”颜色 为 深 
绿色 (#339900)。 单 击 “ 钢 笔 ” 工 具 ,绘制 一 个 由 曲线 和 直线 围 成 的 形状 ,填充 为 黑色 。 新 
建 一 层 , 绘 制 大 小 和 颜色 不 同 的 两 个 椭圆 ,将 小 圆 删除 ,形成 空心 贺 。 单 击 “ 文 本 ”工具 , 输 
入 公司 名 称 “ 绿 浪 ”。 新 建 一 层 ,选择 “文件 ”菜单 ~ 导入 到 舞台 ”命令 ,选择 莲花 位 图 
(Ch4.jpg) , 拖 动 位 图 将 其 放 在 舞台 的 左下 角 ,此 步 为 页 面 布局 与 修饰 页 面 。 

(2) 选择 “插入 ”菜单 一 “新 建 元 件 ” 按 钮 “名 称 ” 为 “球体 ”,“ 类 型 ”为 图形”, 进 入 到 元 
件 编辑 状态 。 单 击 “ 椭 圆 ? 工 具 , 在 “颜色 ?面板 中 设置 “填充 ?为 由 白 一 黑 一 灰 ( 井 999999) 放 
射 状 渐变 , 按 住 Shift 键 绘制 一 个 正 圆 36 X 36( 像 素 ) 。 新 建 一 层 , 复 制 第 1 层 圆 形 , 单 击 
第 2 层 第 1 帧 ,选择 “编辑 "菜单 一“ 粘贴 到 当前 位 置 ” 命 令 。 选 中 辆 形 , 打 开 * 颜 色 ” 面 板 ， 
设置 “填充 ?为 由 白色 一 灰色 (# CCCCCC,Alpha 值 : 60%) 放 射 状 渐变 。 立 体 球体 制作 
完成 。 

(3) 新 建 一 个 元 件 ,“ 名 称 ” 为 “进入 主页 ”“ 类 型 为“ 图形”, 编辑 图 形 元 件 , 输 入 文本 ， 
两 次 按 下 组 合 键 Ctrl 十 B, 将 文本 分 离 为 形状 。 单 击 “ 墨 水瓶 "工具 ,设置 “笔触 "颜色 为 黄色 
( 井 FFFF00) , 单 击 文本 边框, 为 文本 描 边 。 方 法 同上 ,建立 一 个 公司 简介 的 图 形 元 件 。 

(4) 新 建 一 个 元 件 ,“ 名 称 ? 为 “移动 的 球 ”,“ 类 型 为 “影片 剪辑 ”, 进 入 编辑 状态 。 将 
“ 库 ? 面 板 中 的 球体 元 件 拖 人 到 舞台 中 , 单 击 第 10 帧 .第 20 帧 分 别 插入 关键 帧 。 单 击 
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网 页 界面 设计 : 绘制 一 个 由 曲线 立体 球体 的 形状 : 文本 打 散 后 描 边 
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导入 位 图 


i 


DE i FL 1 


相似 的 元 件 可 以 直接 复制 ,然后 人 
例如 : 先 建立 bt01, 然后 复制 


四 这 入 主页 


按钮 元 件 的 几 个 状态 帧 : 
弹 起 ,鼠标 经 过 , 按 下 ,点 击 


动作 - 按 乌 
[Netionseript ro a20 Ew] 


et BRI indexl. hen”) 


和 印记 VEONOO 
oe 
a 

4 


给 按钮 添加 动作 Flash 文 件 播放 效果 
图 12.44 立体 按钮 的 制作 过 程 


第 10 帧 ,将 球体 实例 向 上 移动 一 小 段 距 离 。 在 每 两 个 关键 帧 之 间 创 建 传统 补 间 。 

(5) 新 建 一 个 元 件 , 命 名 为 bt01,“ 类 型 "为 按钮”, 单 击 弹 起 处 ,将 “ 库 ” 面 板 中 的 “ 球 
体 ” 图 形 元 件 拖 入 到 舞台 中 。 在 “指针 经 过 ”处 “ 按 下 ”处 插入 关键 帧 ,把 帧 头 置 于 “指针 经 
过 ”处 。 单 击 “ 球 体 ”实例 ,在 “属性 ”面板 中 单 击 “ 交 换 ” 按 钮 ,将 “球体 ”实例 交换 为 “移动 的 
球体 ”实例 (为 影片 剪辑 类 型 )。 新 建 一 层 , 在 “指针 经 过 ”处 插入 空白 关键 帧 ,将 “ 库 ” 面 板 
中 “进入 主页 "元件 拖 入 到 舞台 中 ,激活 第 一 层 , 单 击 “ 点 击 ” 处 ,绘制 一 个 矩形 块 将 按钮 和 

文本 区 域 包含 在 内 (点 击 区 域 为 响应 鼠标 的 区 域 ,此 区 域 在 电影 中 不 可 见 )。 如 果 不 指定 

点 击 区 域 ,那么 响应 鼠标 的 区 域 只 是 第 1 帧 的 球体 部 分 。 此 时 ,可 单 击 时 间 轴 下 方 的 “ 编 
辑 多 个 帧 "按钮 (又 称 为 洋葱 皮 ) ,查看 各 帧 的 状态 。 

(6) 建立 bt02 的 按钮 元 件 。 对 于 相似 的 元 件 可 以 直接 复制 ,然后 修改 文本 部 分 即 可 。 

(7) 返回 场景 ,将 * 库 ?面板 中 的 两 个 按钮 元 件 拖 人 到 场景 ,移动 到 合适 的 位 置 。 


8. 为 动画 添加 声音 
在 Flash 中 有 两 种 类 型 的 声音 : 事件 声音 和 音频 流 。 事 件 声音 必须 完全 下 载 后 才能 


开始 播放 ,除非 明确 停止 ,否则 它 将 一 直 连 续 播 放 。 音 频 流 在 前 几 帧 下 载 了 足够 的 数据 后 
就 开始 播放 ;音频 流 可 以 通过 和 时 间 轴 同步 以 便 在 Web 站 点 上 播放 。 
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事件 声音 一 般 用 于 按钮 或 者 是 固定 动作 中 的 声音 。 而 音频 流 一 般 应 用 于 背景 音乐 、 
MTYV 的 制作 。 

导入 声音 文件 的 格式 一 般 有 WAV( 仅 限 Windows)、Mid、AIFF( 仅 限 Macintosh) 、 
MP3(Windows 或 Macintosh) 等 ,还 可 设置 声音 的 效果 属性 创造 更 优美 的 音效 。 

【 例 12.15】 给 按钮 添加 声音 效果 : 当 鼠 标 经 过 按钮 时 会 发 出 清脆 的 声响 。 制 作 过 
程 如 下 。 

在 上 一 个 实例 的 基础 上 ,开始 给 按钮 添加 声音 。 首 先 打开 例 12. 14 制作 物 的 Flash 
文件 。 

(1) 导 和 声音。 选择“ 文件 ”菜单 一 “导入 ”>“ 导 人 到 库 ” 命 令 , 选 择 文件 notify. wav, 单 
击 “ 打 开 ” 按 钮 ,如 图 12. 45 所 示 。 打 开 * 库 ?面板 ,查看 导入 的 音频 文件 ,如 图 12. 46 所 示 。 
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图 12.45 选择 要 导入 的 声音 文件 图 12.46 “ 库 " 面 板 


(2) 双击 * 库 ?面板 中 的 按钮 元 件 bt01, 进 入 按钮 编辑 状态 。 新 插入 一 层 , 命 名 为 “ 声 

效 ”, 选 择 此 图 层 的 第 2 帧 , 即 指针 经 过 处 ,插入 一 个 空白 关键 帧 ,然后 打开 * 库 ?面板 ,将 

“ 库 ” 面 板 中 的 声音 文件 notify. wav 拖 放 到 舞台 中 ,会 发 现 * 音 效 " 层 从 第 2 帧 开始 出 现 了 
音 的 波形 线 , 如 图 12. 47 所 示 。 
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图 12.47 ”给 按钮 添加 声音 


网 站 规划 与 网 页 设计 


(3) 在 “属性 ”面板 中 ,将 “同步 ”选项 设置 为 “事件 ”， 局 ze 
如 图 12. 48 所 示 。 测 试 动画 ,发 现 当 鼠 标 移动 到 按钮 上 


名 称 : Lnotifywav 
人 "== 
同步 : | 事件 


9. 有 关上 声音 属性 的 设置 本 


22 kHz 立体声 1 位 14 秒 1193 kB 


在 “属性 ”面板 中 , 单 击 “ 名 称 ” 下 拉 列 表 选 择 声 音 
奖 件 。 

从 “效果 ”下 拉 框 中 选择 “效果 ”选项 。 

(1) 无 : 不 对 声音 文件 应 用 效果 。 选 择 此 选项 将 删除 以 前 应 用 的 效果 。 

(2) 左 声 道 / 右 声 道 : 只 在 左 声 道 或 右 声 道中 播放 声音 。 

(3) 从 左 到 右 淡 出 /从 右 到 左 淡 出 : 会 将 声音 从 一 个 声 道 切换 到 另 一 个 声 道 。 

(4) 淡 入 : 在 声音 的 持续 时 间 内 逐渐 增加 音量 。 

(5) 淡出 : 在 声音 的 持续 时 间 内 逐渐 减 小 音量 。 

(6) 自 定义 : 允许 使 用 “编辑 封套 ”创建 自 定义 的 声音 淡 入 和 淡出 点 。 

从 同步 下 拉 列 表 中 选择 同步 选项 。 

(7) 事件 : 会 将 声音 和 一 个 事件 的 发 生 过 程 同步 起 来 。 事 件 声音 在 显示 其 起 始 关键 
帧 时 开始 播放 ,并 独立 于 时 间 轴 完整 播放 ,即使 SWF 文件 停止 播放 , 它 也 会 继续 。 当 播 
放 发 布 SWF 文件 时 ,事件 声音 混合 在 一 起 。 

(8) 开始 : 与 事件 选项 的 功能 相近 ,但 是 如 果 声音 已 经 在 播放 , 则 新 声音 实例 不 会 
播放 。 

(9) 停止 : 使 指定 的 声音 静音 。 

(10) 数据 流 : 同步 声音 ,以 便 在 Web 站 点 上 播放 。Flash 强制 动画 和 音频 流 同 步 。 
与 事件 声音 不 同 ,音频 流 的 播放 时 间 绝 对 不 会 比 帧 的 播放 时 间 长 。 当 发 布 SWF 文件 时 ， 
音频 流 混合 在 一 起 。 

(11) 重复 : 为 “重复 "输入 一 个 值 .以 指定 声音 应 循环 的 次 数 ,或 者 选择 “循环 ”以 连 
续 重 复 声音 。 对 于 音频 流 不 建议 循环 播放 。 

(12) 利用 “声音 编辑 控件 "编辑 声音 : 在 Flash 中 可 以 对 声音 进行 一 些 简单 的 编辑 , 
比如 ,控制 声音 的 播放 音量 .改变 声音 开始 播放 和 停止 播放 的 位 置 等 。 

单 击 “ 属 性 ”面板 中 效果 右 侧 的 “编辑 声音 封套 ”按钮 辆 |, 弹 出 “编辑 封套 ”对 话 框 ,如 
图 12. 49 所 示 , 在 此 对 话 框 中 编辑 声音 。 

。 要 改变 声音 的 起 始点 和 终止 点 , 拖 动 “编辑 封套 ”中 的 “开始 时 间 ” 和 “停止 时 间 ” 
控件 。 
要 更 改 声音 封套 , 拖 动 封套 手柄 来 改变 声音 中 不 同 点 处 的 级 别 。 封 套 线 显示 声音 
播放 时 的 音量 。 单 击 封套 线 可 以 创建 其 他 封套 手柄 (总 共 可 达 8 个 ) 。 要 删除 封 
套 手 柄 ,请 将 其 拖 出 窗口 。 
单 击 “放大 ?或 “缩小 ?按钮 ,可 以 改变 窗口 中 显示 声音 的 大 小 。 
要 在 秒 和 帧 之 间 切 换 时 间 单 位 , 单 击 “ 秒 ? 或 “ 帧 ?按钮 。 
单 击 “播放 ?按钮 ,可 以 听 编辑 后 的 声音 。 


图 12.48 给 声音 设置 属性 
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图 12. 49 “编辑 封套 "对 话 框 


(13) 输出 带 声音 的 动画 : 如 果 Flash 文件 中 包含 有 声音 ,就 要 考虑 采用 什么 样 的 格 
式 对 声音 进行 压缩 。 

在 * 库 ?面板 中 单 击 声音 文件 ,然后 右 击 , 在 弹出 的 快捷 菜单 中 选择 * 属 性 ”命令 , 单 击 
“压缩 格式 ?下 拉 框 ,有 以 下 几 种 压缩 格式 : 

。 ADPCM: 用 于 设置 8 位 或 16 位 声音 数据 的 压缩 。 导 出 较 短 的 事件 声音 (如 单 击 
按钮 ) 时 ,请 使 用 ADPCM 选项 。 
MP3: 可 以 用 MP3 压缩 格式 导出 声音 。 当 导出 乐曲 这 样 较 长 的 音频 流 时 ,请 使 
用 MP3 选项 。 

。 原 始 : 压缩 选项 在 导出 声音 时 不 进行 压缩 。 

。 语音 : 使 用 一 个 适合 于 语音 的 压缩 方式 导出 声音 。 

【 例 12.16】 给 页 面 添 加 背景 音乐 ,制作 过 程 如 下 。 

在 例 12. 15 的 基础 上 ,添加 背景 音乐 。 首 先 打 开 例 12. 15 的 Flash 文件 。 

(1) 选择 “文件 ”菜单 一“ 导入 ”一 “导入 到 库 ” 命 令 , 选 择 “ 月 亮 代 表 我 的 心 一 陶 蔚 . 
mp3” 声 音 文件 , 单 击 “ 打 开 ” 按 钮 。 

(2) 在 场景 中 ,插入 一 层 , 选 中 此 层 的 空白 关键 帧 (第 1 帧 ) ,将 * 库 面板 中 的 “月 亮 代 
表 我 的 心 一 陶 芋 . mp3? 拖 和 人 到 场景 中 。 

(3) 在 “属性 ”面板 中 设置 “同步 ”选项 为 “事件 ”。 最 后 按 组 合 键 Ctrl 十 Enter 测试 影 
片 ,音乐 响起 ,制作 完成 。 


12.4.5 Flash 动画 中 的 交互 控制 


在 Flash CS5 中 ,借助 于 ActionScript 来 实现 程序 化 的 交互 动画 ,如 网 站 广告 .网 络 
游戏 ,Flash MTV 等 。 


网 站 规划 与 网 页 设计 


1. 动作 面板 介绍 


用 ActionScript 进行 编程 需要 用 到 “动作 ”面板 ,“ 动 作 ” 面 板 是 专业 编写 脚本 程序 的 
开 改 环境。 选择“ 窗口" 菜单 “动作 ”命令 ,或 按 快捷 键 F9 打开 “动作 ”面板 ,如 
图 12. 50 所 示 。“ 动 作 ” 面 板 由 三 部 分 组 成 : 动作 工具 箱 ( 按 类 别 对 ActionScript 元 素 进行 
分 组 ) 脚本 导航 器 (可 以 快速 地 在 Flash 文档 中 的 脚本 间 导 航 ) 和 脚本 窗 格 (可 以 在 其 中 
输入 ActionScript 代码 ) , 单 击 动作 面板 左 侧 窗 格 下 方 的 箭头 ,将 显示 脚本 导航 器 ; 单 击 右 
侧 窗 格 * 脚 本 助手 ”让 按钮 ,显示 /隐藏 代码 提示 。 
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图 12.50 “动作 -按钮 "面板 


2. 动作 脚本 基本 元 素 


人 
动作 脚本 语句 以 分 号 “; ”结束 ,例如 : 


Stop () 7 


2) 大 括号 

动作 脚本 有 时 需要 将 几 行 代码 组 合 到 块 中 。 这 就 需要 使 用 大 括号 *{)”。 用 户 可 以 在 
与 开始 代码 同一 行 或 下 一 行 上 放置 一 个 开始 大 括号 。 例 如 

on (release) { 


getURL ("index1.htm"," blank"); 
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3. ActionScript 基本 语句 


1) 时 间 轴 控制 命令 
打开 “动作 -按钮 "面板 , 单 击 “ 全 局 函数 ”一 “时 间 轴 控制 "选项 ,可 以 看 到 4 条 命令 。 

如 图 12. 51 所 示 。 下 面 介绍 这 几 条 常用 的 命令 。 
(1) goto 命令 。 


gotoandplay([scene],frame): 将 播放 磁头 转 到 指定 场景 中 @ a 
指定 帧 并 从 该 帧 开始 播放 ;参数 scene([] 表 示 可 选 参数 ): 场景 
的 名 称 ;参数 frame: 播放 磁头 将 转 到 的 帧 的 编号 或 标签 。 国 12551 时 向 加 牛人 
gotoandstop([scene],frame): 将 播放 磁头 转 到 指定 场景 中 bi 
指定 帧 并 从 该 帧 停止 播放 。 


(2) stopallsounds 命令 。 

在 不 停止 播放 磁头 的 情况 下 停止 当前 正在 播放 的 所 有 声音 。 格 式 为 “stopallSounds()”， 
括号 中 无 参数 。 

(3) stop 和 play 命令 。 

play() 播 放 命令 ,无 参数 。 

stop() 停 止 播放 命令 ,无 参数 。 

2) 浏览 器 /网 络 命令 

打开 “动作 ”面板 , 单 击 “ 全 局 函数 ”一 “浏览 器 /网 络 " 命 令 , 可 以 看 到 10 条 命令 。 下 面 
介绍 常用 的 几 种 。 

(1) fscommand 命令 。 


fscommand 是 Flash 与 其 他 应 用 程序 互相 传达 命令 的 命令 。 格 式 为 : 

"fscommand ("command", "parameters")", 

如 通过 fscommand 命令 设置 Flash Player 播放 器 ,释放 按钮 时 ,将 SWF 文件 放大 到 
整个 显示 器 屏幕 大 小 ,代码 如 下 : 


on (release) { 
fscommand ("fullscreen", "true"); 
} 


(2) getURL 命令 。 
用 于 建立 网 页 的 超级 链接 ,格式 为 : 
getURL (url[, 窗 口 ] [, "变量 "]) 


例如 单 击 某 个 按钮 链接 到 新 浪 网 代码 如 下 : 


on (press) { 
getURL ("http://www.sina.com.cn"," blank"); 

窗口 为 可 选 参 数 : _self\_blank\_parent\_top。 

变量 : 可 选 参数 ,用 于 发 送 变量 的 GET 或 post 方 法 。 
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(3) loadMovie 命令 。 
用 于 加 载 外 部 的 SWF 文件 或 JPG 图像 文件 。 格 式 为 : 


loadMovie ("url"[, 目 标 ] [, "变量 "]) 
例如 : 


on (press){ 
loadMovie ("products. swf",1); 

} 

注意 : 如 果 目 标 参 数值 为 0, 将 履 盖 本 身 Flash 画面 ,数值 为 其 他 值 , 不 会 覆盖 Flash 
本 身 的 画面 。 

3) 为 按钮 实例 添加 动作 

在 按钮 实例 上 添加 脚本 命令 语句 时 ,必须 先 为 其 添加 影片 剪辑 控制 中 的 on 事件 处 理 
函数 。On 事件 的 语法 格式 如 下 : 

on (鼠标 事件 ){ 

语句 ;// 用 来 响应 鼠标 事件 

} 

鼠标 事件 主要 包括 press( 按 下 )/release( 释 放 )/rollover( 滑 过 )/rollout( 滑 离 ) 等 。 

【 例 12.17】 添加 动作 ,完成 页 面 的 制作 ,制作 过 程 如 下 。 

在 例 12. 16 的 基础 上 ,完成 页 面 的 制作 ,首先 打开 例 12. 16 制作 物 的 Flash 文件 。 

(1) 在 场景 中 ,选中 bt01 按钮 实例 ,打开 “动作 ”面板 ,双击 “影片 剪辑 控制 "中 的 on 
命令 ,选择 鼠标 事件 为 “释放 ”, 再 选择 “浏览 器 /按钮 "中 getURL 命令 ,输入 url 地 址 : 
indexl. htm, 其 他 参数 可 不 设置 ,如 图 12. 52 所 示 。 代 码 如 下 : 

on (release) { 

getURL ("index]l .htm"); 
’ 
史 崩 全 vw 半 名 滩 富 车 和 荣 全 NS sO 


on (release) { 
getURL (“indexl. htnl”); 


图 12.52 给 按钮 添加 动作 


(2) 同 理 ,选中 bt02 按钮 实例 ,其 他 设置 与 上 一 步 相 同 , 输 入 url 地 址 : introduce. htm。 
注意 : 动作 可 以 添加 到 按钮 电影 剪辑 关键 帧 和 空白 关键 帧 中 ,但 不 能 分 配给 图 形 
元 件 和 普通 帧 ,鼠标 事件 只 能 分 配给 按钮 实例 。 


12.5 Flash MTV 实例 的 制作 


本 小 节 将 讲解 例 12. 1 所 举 Flash MTYV 的 制作 过 程 ,动画 中 通过 单 击 按钮 实现 播放 
不 同 的 影片 画面 和 歌曲 。 实 例 中 综合 了 图 形 、 文 本 动画 的 制作 ,添加 声音 文件 ,利用 


ActionScript 脚本 语言 实现 动画 交互 ,浏览 者 可 以 随心 所 和 欲 地 点 听 自 己 喜欢 的 歌曲 。 制 
作 过 程 如 图 12. 53 所 示 。 
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图 12.53 Flash MTYV 制作 过 程 


(1) 新 建 一 个 文档 ,大 小 为 770X400( 像 素 ) ,背景 颜色 为 白色 。 首 先 设计 背景 画面 ， 
新 建 一 个 层 文件 夹 , 将 其 命名 为 “画面 ”, 将 有 关 夯 面 布 局 的 图 层 都 放 在 此 层 文件 夹 中 。 将 
不 同 的 对 象 放 在 不 同 的 层 中 ,注意 层 的 上 下 顺序 。 

(2) 单 击 “ 和 矩形 "工具 。 设 置 “填充 ”为 白色 “笔触 样式 ”为 斑马 线 “ 宽 度 ” 为 5,“ 颜 色 ” 
为 #999933 ,绘制 矩形 。 将 矩形 整个 选中 , 记 下 此 和 矩形 的 位 置 : x: 299,y:132 ,宽度 :340， 
高 度 : 237 , 按 组 合 键 Ctrl 十 G 组 合 图 形 。 

(3) 制作 滤 镜 效果 。 导 入 一 幅 位 图 wangfei. jpg, 将 位 图 置 于 和 矩形 框 内 。 选 中 位 图 ， 
按 快捷 键 F8, 将 位 图 转换 为 元 件 , “名称” 为 wangfei.“ 类 型 "为 “影片 剪辑 ”, 双 击 进入 编辑 
状态 ,选中 位 图 .转换 为 元 件 ,“ 类 型 "为 “影片 剪辑 ”( 因 为 滤 镜 效果 只 能 添加 到 影片 剪辑 元 
件 实例 ),“ 名 称 ” 为 wangfei0。 单 击 第 20 帧 .第 40 帧 ,分 别 插入 关键 帧 ,设置 创建 传统 补 
间 。 选 中 第 20 帧 , 单 击 wangfei0 实例 , 单 击 “ 属 性 ”面板 中 的 “添加 滤 镜 ”按钮 ,添加 调整 
颜色 ,亮度 : 0, 对 比 度 : 0, 饱 和 度 : 0, 色 相 : 180。 

(4) 制作 文字 飘 出 效果 。 输 入 文本 “ 菲 比 寻 常 ”, 按 快捷 键 F8 将 其 转换 为 元 件 ,“ 名 
称 ” 为 “logo”,“ 类 型 ”为 “影片 剪辑 ”, 双击 进入 影片 剪辑 编辑 状态 , 按 Ctrl 十 B 组 合 键 ,分 
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离 文本 块 为 单个 文本 ,选择 “修改 "菜单 -时 间 轴 ?选项 -分散 到 图 层 " 命 令 。 单 击 “ 菲 ” 
层 第 10 帧 ,插入 关键 帧 ; 单 击 第 1 帧 ,设置 创建 传统 补 间 。 在 舞台 中 选中 * 菲 ,选择 “ 窗 
口 " 菜 单一 “变形 ”命令 ,打开 “变形 ”面板 ,设置 长 宽 比例 均 为 10% ,旋转 设置 为 180 度 ,将 
“ 非 " 字 拖 到 画面 正 上 方 的 外 部 。 

(5) 单 击 “ 比 " 层 ,将 第 1 个 关键 帧 向 后 移动 到 第 5 帧 。 单 击 第 15 帧 , 按 快捷 键 F6 插 
入 关键 帧 ; 单 击 第 5 帧 ,设置 创建 传统 补 间 。 在 舞台 中 选中 “ 比 ”, 打 开 “ 变 形 ” 面 板 ,设置 长 
宽 比 例 均 为 10% ,旋转 设置 为 180 度 , 将 * 比 ? 字 拖 到 画布 正 上 方 的 外 部 。 其 他 文字 以 此 
类 推 , 选 中 所 有 图 层 的 第 30 帧 , 按 快捷 键 F5 插入 帧 。 新 建 一 层 , 单 击 第 30 帧 , 按 快捷 键 
F6 插入 空白 关键 帧 ,打开 “动作 ”面板 ,添加 动作 为 stop() ,效果 是 文字 从 上 方 随 风 飘 出 ， 
然后 静止 不 动 。 

(6) 返回 场景 ,输入 文本 为 “ 落 入 人 间 的 精灵 ”。 选 中 文本 , 按 快捷 键 F8 将 其 转换 
为 元 件 ，“ 名 称 ” 为 “font0”,“ 类 型 "为 “影片 剪辑 ”, 双 击 进 入 影片 剪辑 编辑 状态 。 将 
第 1 个 关键 帧 移动 到 第 30 帧 ; 单 击 第 50 帧 ,插入 关键 帧 : 单 击 第 30 帧 ,设置 创建 传统 
补 间 ,将 文本 垂直 移动 到 场景 外 。 单 击 第 50 帧 ,添加 动作 为 stop() ,效果 是 文本 由 上 而 
下 落下 。 

(7) 返回 场景 ,绘制 一 个 矩形 ,填充 为 橘 黄色 (#FFCC00) ,选中 矩形 , 按 快捷 键 F8 转 
换 为 元 件 ,“ 名 称 ” 为 “按钮 01”,“ 类 型 "为 “按钮 ”, 双 击 和 矩形 进入 元 件 编辑 状态 。 这 个 按钮 
由 3 层 组 成 ,第 1 层 ,在 指针 “经 过 ”、 按 下 处 分 别 插入 关键 帧 。 新 建 一 层 , 单 击 指针 经 过 
处 ,插入 关键 帧 ,再 绘制 一 个 “宽度 ”等 于 、 高 度 小 于 橘 黄色 和 矩形 块 的 矩形 ,填充 颜色 为 浅 灰 
色 (# CCCCCC) , 单 击 “ 按 下 处 ”, 插 入 关键 帧 。 新 建 一 层 , 单 击 “指针 经 过 ?处 , 搬 和 空白 关 
键 帧 ,输入 文本 为 “天 上 人 间 ”。 其 他 两 个 按钮 的 制作 过 程 与 上 一 步 基本 相同 ,不 同 之 处 为 
输入 文本 为 “ 拆 言 "和 “旋转 的 木马 ”。 返 回 场景 ,将 库 中 按钮 拖 入 场景 中 ,保存 文件 名 为 
flashmtv. fla, 此 文件 制作 先 暂时 到 此 。 

(8) 在 Fireworks 中 处 理 3 幅 位 图 ,名 称 为 wangfei01. jpg、wangfei02. jpg 和 
wangfei03. jpg, 大 小 为 340X237( 像 素 )。 

(9) 新 建 一 个 文档 ,大 小 为 770X400( 像 素 ), 导 入 位 图 wangfei01. jpg, 位 图 的 x、y 
位 置 分 别 为 : 299、132。 将 位 图 转换 为 影片 剪辑 元 件 。 分 别 单 击 第 20 帧 .第 70 帧 .第 
120 帧 插入 关键 帧 。 单 击 第 1 帧 ,选中 场景 中 的 实例 ,在 “属性 ”面板 中 单 击 “ 颜 色 ” 下 拉 
列表 设置 Alpha 为 0。 单 击 第 70 帧 ,选中 场景 中 的 实例 , 单 击 * 属 性 ?面板 中 的 “添加 滤 
镜 ” 按 钮 ,添加 模糊 效果 ,模糊 X: 10 ,模糊 Y: 10。 在 每 两 个 关键 帧 之 间 设 置 创建 传统 
补 间 。 

(10) 选择 “文件 "菜单 “导入” 一“ 导 和 人 到 库 ” 命 令 , 导 入 声音 文件 “天 上 人 间 . mp3”。 

(11) 新 建 一 层 , 单 击 第 1 帧 ,在 “属性 ”面板 “声音 ”下 拉 框 ,选中 “天 上 人 间 . mp3”。 
选择 “文件 "菜单 一 “导出 ”>“ 导 出 为 影片 ”命令 ,名称 为 wangfei01. swf。 

(12) 按 第 (9) 一 (11) 步 的 方法 , 同 理 制作 wangfei02. swf、wangfei03. swf, 只 是 位 图 
图 像 不 同 、 声 音 文件 不 同 。 

(13) 打开 flashmtv. fla, 单 击 按钮 01 实例 ,打开 “动作 ”面板 , 单 击 “ 脚 本 助手 ”按钮 ， 
单 击 动作 工具 箱 中 的 “影片 剪辑 控制 ?on 命令 ,在 代码 提示 区 域 选择 “ 按 下 ”, 再 选择 “浏览 


| 第 12 章 利用 Flash 设 计 网 页 动画 ] 


器 /网 络 ”loadmovie 命令 ,在 URL 框 中 输入 : wangfei01. swf, “位置 ”选择 “级 别 ”, 数 值 框 
中 输入 1, 其 他 默认 。 给 另外 两 个 按钮 实例 添加 同样 的 动作 ,不 同 的 是 URL 的 地 址 为 


wangfei02. swf .wangfei03. swf 。 


(14) 最 后 选择 “文件 ”菜单 一 “导出 ”一 “导出 影片 ”命令 ,给 文件 命名 为 flashmtv 


.swf, 制 作 完成 。 浏 览 SWF 文件 时 , 单 击 不 同 的 按钮 可 欣赏 不 同 的 画面 和 音乐 。 


图 


图 


本 章 小 结 


本 章 主要 介绍 了 应 用 Flash 软件 制作 网 页 动画 特效 的 技巧 包括 : 

(1) 使 用 Flash 创建 文本 ,编辑 位 图 和 矢量 图 形 、 处 理 Flash 文本 特效 。 
(2) 使 用 Flash 创建 形状 渐变 动画 和 运动 渐变 动画 。 

(3) 为 Flash 文件 添加 声音 效果 ,利用 Flash 动作 面板 ,制作 交互 动画 。 


练 习 题 
(1) Flash 文档 的 扩展 名 是 什么 ”导出 默认 的 Flash 影片 的 扩展 名 是 什么 ? 
(2) Flash 动画 分 为 哪 几 种 ? 有 什么 区 别 ? 


(3) 什么 是 元 件 ? 什么 是 实例 ?元 件 与 实例 的 区 别 和 联系 是 什么 ? 
(4) 遮 蛙 层 的 作用 是 什么 7 引导 层 的 作用 是 什么 ? 


上 机 实验 


1. 实验 要 求 


(1) 制作 形状 渐变 动画 。 要 求 : 根据 给 定 素材 ,利用 形状 渐变 制作 动画 效果 ,效果 如 
12. 54 所 示 。 

(2) 制作 沿路 径 运动 动画 。 要 求 : 根据 给 定 的 素材 制作 蝴蝶 在 花丛 中 左 飞 右 飞 的 效 
果 , 如 图 12. 55 所 示 。 

(3) 制作 利用 喧 单 层 的 动画 。 要 求 : 利用 遮 单 层 的 功能 制作 霓 光 灯 效 果 , 效 果 如 
12. 56 所 示 。 


图 12.54 形状 渐变 图 12.55 运动 动画 图 12.56 霓 光 灯 效 果 
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(4) 制作 MTYV 动画 。 要 求 : 设计 画面 ,添加 声音 .利用 交互 动作 ,制作 流畅 的 Flash 
MTV ,效果 如 图 12. 57 所 示 。 


SS 


天 喜之 


如 半 个 月 充 种 上 来 


图 12.57 Flash MTV 


2. 背景 知识 


根据 本 章 所 学 的 Flash 的 基本 知识 ,同时 结合 Fireworks 的 相关 知识 及 书 中 所 讲 过 
的 页 面 布局 和 修饰 的 技巧 ,还 要 注意 色彩 在 制作 过 程 中 的 应 用 。 


3. 实验 准备 工作 
将 相应 的 Flash 的 样 图 、 素 材 ,如 音频 、 视 频 、 位 图 等 文件 发 送 到 学 生 主 机 中 ,以 供 学 


生 参 考 使 用 。 

4. 课时 安排 

实 训 安排 课时 为 6 课时 ,第 (1) 项 和 第 (2) 项 实 训 共 为 2 课时 ,其 余 各 项 实 训 各 为 
2 课时 。 

5. 实 训 指导 


1) 制作 补 间 形 状 

(1) 在 第 1 层 使 用 "绘图 ”工具 ,并 在 “属性 ?面板 中 设置 填充 和 笔触 效果 设计 舞台 画 
面 . 蓝 天 青山、 笔直 的 公路 .然后 分 别 导 入 三 幅 位 图 car. png plane. png 和 bird. png 到 
库 中 。 

(2) 新 建 一 层 , 打 开 * 库 ?面板 ,将 car. png 拖 入 到 舞台 中 ,选择 “修改 ”菜单 “位 图 ” 
选项 一 “转换 位 图 为 矢量 图 ”命令 ,弹出 “转换 位 图 为 矢量 图 ”对 话 框 ,设置 相应 的 参数 , 单 
击 “ 确 定 ” 按 钮 。 

(3) 用 “任意 变形 ”工具 缩放 图 形 , 在 第 15 帧 ,插入 关键 帧 ,将 汽车 图 形 移动 一 些 距离 。 


(4) 单 击 第 75 帧 ,插入 关键 帧 ,将 * 库 ?面板 中 的 plane. png 位 图 拖 入 到 舞台 中 ,与 
car. png 位 置 重合 ,将 car. png 删除 ,将 plane. png 转换 为 矢量 图 。 单 击 第 80 帧 ,插入 关 
键 帧 ,将 plane. png 向 上 移动 一 段 距 离 。 

(5) 单 击 第 130 帧 ,插入 关键 帧 ,将 * 库 ?面板 中 的 bird. png 拖 入 到 舞台 ,与 plane 
. png 位 置 重合 ,将 plane. png 删除 ,将 bird. png 转换 为 矢量 图 ,将 bird. png 向 上 移动 一 
段 距 离 。 在 每 两 个 关键 帧 之 间 创 建 补 问 形 状 。 

(6) 选择 “文件 "菜单 一 “导出 ”>“ 导 出 影片 ”命令 ,制作 完成 。 

2) 制作 沿路 径 运动 动画 

(1) 导入 一 幅 位 图 到 舞台 ,将 此 层 命 名 为 “背景 ”, 大 小 与 文档 相同 ,为 550 X400( 像 
素 ) ,锁定 “背景 " 层 。 

(2) 导入 4 个 蝴蝶 位 图 到 “ 库 ” 面 板 , 新 建 一 层 , 将 一 个 蝴蝶 位 图 拖 入 到 场景 , 放 在 一 
个 花 朱 上 , 按 快捷 键 F8, 将 其 转换 为 flyl 影片 剪辑 元 件 。 双 击 进 入 编辑 状态 ,选中 位 图 ， 
快捷 按键 F8 ,将 其 转换 为 flyla 图 形 元件 。 单 击 第 3 帧 ,插入 关键 帧 ,选中 图 形 实例 , 单 击 
“任意 变形 "工具 ,纵向 缩小 图 形 , 单 击 第 1 帧 ,设置 创建 传统 补 间 ,效果 是 蝴蝶 快速 地 扇 动 
翅膀 。 其 他 蝴蝶 制作 的 方法 相似 。 共 有 4 只 蝴蝶 ,两 只 大 、 两 只 小 。 

(3) 返回 到 场景 中 ,将 4 只 蝴蝶 元 件 拖 入 到 场景 中 ,并 放 在 不 同 的 图 层 中 ,两 只 小 蝴 
蝶 放 在 一 条 花 上 ,只 有 一 个 关键 帧 ,位 置 不 发 生变 化 。 

(4) 另外 两 只 大 蝴蝶 沿路 径 运动 。 两 只 蝴蝶 在 不 同 的 层 中 。 插 入 两 个 引导 层 , 绘 制 
路 径 , 每 一 个 引导 层 引 导 一 只 蝴蝶 的 运动 轨迹 ,分 别 插入 若干 关键 帧 ,修改 不 同 关键 帧 处 
的 位 置 即 可 实现 在 花 打 处 短 时 停留 ,然后 飞 走 效 果 。 最 后 导出 影片 。 时 间 轴 如 图 12. 58 
所 示 。 

3) 制作 利用 遮 彰 层 的 动画 

(1) 单 击 “ 钢 笔 ” 工 具 ,绘制 一 条 曲线 ,转换 为 图 形 元 件 , 选 中 曲线 实例 , 单 击 “ 任 意 
变形 ”工具 ,将 变形 基准 点 移动 到 左 侧 的 顶点 。 然 后 打开 “变形 "面板 ,旋转 角度 为 
30 度 , 连 续 单 击 “ 重 制 选区 和 变形 ”按钮 ,形成 沈 光 灯 灯 架 , 如 图 12. 59 所 示 。 此 层 命 名 


图 12.58 沿路 径 飞 舞 的 蝴蝶 图 12.59 霓虹灯 灯 架 


(2) 新 建 一 层 , 将 * 灯 架 ” 层 的 关键 帧 复制 到 新 建 的 层 中 。 再 新 建 一 层 ,绘制 一 个 填充 
七 彩 渐变 色 的 圆 ,将 此 层 置 于 中 间 层 ,设置 创建 传统 补 间 , 圆 从 小 变 大 ,大 到 覆盖 整个 
灯 架 。 

(3) 单 击 最 上 层 , 选 中 灯 架 图 形 ,两 次 按 组 合 键 Ctrl 十 B, 分 离 图 形 ,选择 “修改 "菜单 一 
“将 线条 转换 为 填充 ?命令 , 层 的 属性 设置 为 庶 罩 层 。 动 画 制作 完成 。 
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4) 制作 MTYV 动画 

(1) 新 建 一 个 文档 ,尺寸 为 800X600( 像 素 ) ,背景 为 黑色 。 此 文档 为 主 Flash 文件 。 
设计 画面 ,导入 一 幅 图 形 , 拖 人 到 场景 ,作为 背景 图 层 , 锁 定 图 层 。 

(2) 新 建 一 层 ,绘制 一 个 矩形 块 ,颜色 为 白色 , 比 背 景 图 略 小 ,组 合 。 导 和 一 幅 位 图 ， 
选中 位 图 转换 为 影片 剪辑 元 件 。 双 击 进入 影片 剪辑 的 编辑 界面 ,添加 滤 镜 效果 ,创建 传统 
补 间 , 记 住 此 实例 的 大 小 (336X 439( 像 素 )) 和 位 置 (X: 50,Y: 79), 导 入 一 幅 位 图 , 放 在 
舞台 的 右 下 角 。 

(3) 输入 文本 “天 籁 之 音 ”, 将 其 转化 为 影片 剪辑 元 件 , 制 作文 字 特 效 “ 随 风 飘 下 ”的 
效果 。 

(4) 制作 按钮 。 按 钮 在 弹 起 处 是 一 个 静止 圆 球 实例 ,指针 经 过 处 是 一 个 垂直 移动 的 
小 球 , 且 显示 歌曲 名 称 。 共 有 3 个 按钮 ,分 别 为 按钮 01 ,按钮 02 ,按钮 03。 

(5) 新 建 一 个 文档 ,尺寸 为 800X600( 像 素 ) ,导入 一 幅 位 图 ,将 位 图 拖 人 到 场景 ,大 小 
为 336X439( 像 素 )) 位 置 为 X: 50,Y: 79。 选 中 位 图 ,将 其 转换 为 影片 剪辑 元 件 ,双击 进 
入 编辑 状态 ,将 位 图 实例 转换 为 影片 剪辑 (因为 要 设置 滤 镜 效果 ,因此 必须 转换 为 影片 剪 
辑 )。 再 导入 另 一 幅 图 像 , 设 置 动画 效果 为 位 图 实例 由 清晰 到 模糊 然后 到 完全 透明 ,然后 
出 现 另 一 幅 图 像 , 由 清晰 到 模糊 到 完全 透明 ,利用 滤 镜 效果 和 Alpha 值 来 实现 。 

(6) 最 后 导入 声音 文件 。 返 回 到 场景 ,新 建 一 层 , 单 击 第 1 帧 处 ,在 “属性 ?面板 中 , 单 
击 “ 声 音 ” 下 拉 框 ,选择 声音 文件 名 ,效果 ”为 “无 ", “同步 ?为 事件”。 导 出 影片 ,用 同样 的 
方法 建立 另 两 个 Flash 文件 ,导出 的 3 个 影片 分 别 是 yueliang. swf、qingwang. swf 和 
xiasha. swf。 

(7) 返回 到 主 Flash 文件 ,选中 按钮 01 ,打开 * 动 作 ? 面 板 ,选中 “影片 剪辑 控制 ?中 On 
命令 ,事件 设置 为 * 按 下 ”。 选 中 “浏览 器 /网 络 ” 中 loadmovie 命令 ,在 URL 框 中 输入 
yueliang. swf, 位 置 选择 “级 别 ”, 数 值 框 中 输入 1, 其 他 采用 默认 设置 。 同 理 , 选 中 第 2 个 
按钮 及 第 3 个 按钮 。 其 他 操作 与 上 一 步 相同 ,只 是 在 URL 框 分 别 输入 的 是 qingwang. 
swf 和 xiasha. swf。 

(8) 按 组 合 键 Ctrl 十 Enter 测试 影片 ,同时 也 导出 与 Flash 文件 同名 的 影片 mtv. swf， 
制作 完成 。 


本 章 首 先 介绍 了 Photoshop CS5 软件 操作 方法 ,又 通过 多 个 图 像 设 计 和 网 页 实例 , 讲 
解 如 何 利用 Photoshop 进行 网 页 设计 。 


【本 章 学 习 目 标 】 


。 了解 Photoshop CS5 的 工作 界面 ; 

。 掌握 Photoshop CS5 软件 操作 方法 ; 

。 掌握 利用 Photoshop CS5 软件 进行 平面 设计 的 方法 ; 
。 掌握 利用 Photoshop CS5 软件 进行 网 页 设计 。 


13.1 Photoshop CS5 简介 


Adobe Photoshop 是 一 款 功 能 强大 的 图 像 处 理 软件 ,由 美国 Adobe 公司 在 1990 年 首 
次 推出 ,在 图 像 处 理 和 电脑 绘图 领域 中 占据 了 重要 地 位 。 经 过 多 次 更 新 换代 ,功能 得 以 不 
断 增强 与 完善 。 最 新 推出 的 Photoshop CS5 ,就 新 增加 了 许多 功能 ,例如 : 流体 画布 旋转 
的 功能 ,调整 面板 的 改进 ,创新 的 3D 与 绘图 合成 等 功能 ,使 原 有 功能 更 加 完善 。 


13.1.1 ”Photoshop 的 应 用 


Photoshop 的 应 用 领域 很 广泛 ,在 图 像 、 网 页 设计 、 视 频 、Web 出 版 各 方面 都 有 涉及 。 
Photoshop 的 专长 在 于 图 像 处 理 , 而 不 是 图 形 创作 。 主 要 用 于 平面 设计 、 网 页 设计 绘画 、 
标志 设计 数码 照片 处 理 及 一 些 后 期 处 理 等 方面 。 本 章 主要 讲解 应 用 Photoshop 进行 网 
页 设计 。 

1. 平面 设计 


平面 设计 是 Photoshop 应 用 最 为 广泛 的 领域 ,无 论 是 我 们 正在 阅读 的 图 书 封面 ,还 是 
大 街 上 看 到 的 招贴 海报 ,这 些 具 有 丰富 图 像 的 平面 印刷 品 ,基本 上 都 需要 Photoshop 软件 
对 图 像 进行 处 理 。 
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2. 修复 照片 


Photoshop 具有 强大 的 图 像 修饰 功能 。 利 用 这 些 功 能 ,可 以 快速 修复 一 张 破损 的 老 
照片 ,也 可 以 修复 人 脸 上 的 斑点 等 缺陷 。 


3. 广告 摄影 


广告 摄影 作为 一 种 对 视觉 要 求 非常 严格 的 工作 ,其 最 终 成 品 往往 要 经 过 Photoshop 
的 修改 才能 得 到 满意 的 效果 。 


4. 影像 创意 


影像 创意 是 Photoshop 的 特长 ,通过 Photoshop 的 处 理 可 以 将 原本 风 马 牛 不 相 及 的 
对 象 组 合 在 一 起 ,也 可 以 使 用 “狸猫 换 太子 ”的 手段 使 图 像 发 生 面 目 全 非 的 巨大 变化 。 


5. 艺术 文字 

当 文 字 通 过 Photoshop 处 理 , 就 已 经 注定 不 再 普通 。 利 用 Photoshop 可 以 使 文字 发 
生 各 种 各 样 的 变化 ,并 利用 这 些 艺 术 化 处 理 后 的 文字 为 图 像 增 加 效果 。 

6. 图 标 制作 


虽然 使 用 Photoshop 制作 图 标 在 感觉 上 有 些 大 材 小 用 ,但 使 用 此 软件 制作 的 图 标的 
确 非常 精美 。 


7. 网 页 设计 


网 络 的 普及 是 促使 更 多 人 需要 掌握 Photoshop 的 一 个 重要 原因 。 因 为 在 设计 网 页 时 
Photoshop 是 必 不 可 少 的 网 页 设计 处 理 软件 。 


8. 软件 界面 设计 


软件 界面 设计 是 一 个 新 兴 的 领域 ,已 经 受到 越 来 越 多 的 软件 企业 及 开发 者 的 重视 , 虽 
然 暂时 还 未 成 为 一 种 全 新 的 职业 ,但 相信 不 久 的 将 来 一 定 会 出 现 专业 的 界面 设计 师 职业 。 
在 当前 还 没有 用 于 做 界面 设计 的 专业 软件 ,因此 绝 大 多 数 设计 者 使 用 的 都 是 Photoshop。 


13.1.2 ”Photoshop 的 基本 功能 


从 功能 上 分 ,Photoshop CS5 的 功能 可 分 为 图 像 编 辑 ` 图 像 合成 、 校 色调 色 及 特效 制 
作 等 。 

图 像 编 辑 是 图 像 处 理 的 基础 ,可 以 对 图 像 做 各 种 变换 ,如 放大 ,缩小 ,旋转 ,倾斜 \ 镜 
像 .透视 等 。 也 可 进行 复制 ,去除 斑 点 、 修 补 、 修 饰 图 像 的 残损 等 。 这 在 婚纱 摄影 人像 处 
理 制 作 中 有 非常 大 的 用 场 ,如 去 除 人 像 上 不 满意 的 部 分 ,进行 美化 加 工 , 得 到 让 人 非常 满 
意 的 效果 。 

图 像 合 成 则 是 将 几 幅 图 像 通过 图 层 操作 ,工具 应 用 合成 完整 的 ,传达 明确 意义 的 图 
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像 ,这 是 美术 设计 的 必 经 之 路 ;该 软件 提供 的 绘图 工具 让 外 来 图 像 与 创意 很 好 地 融合 ， 
图 像 的 合成 天 衣 无 缝 。 

校 色调 色 是 该 软件 中 深 具 威力 的 功能 之 一 ,可 方便 快捷 地 对 图 像 的 颜色 进行 明暗 、 色 
偏 的 调整 和 校正 ,也 可 在 不 同 颜色 间 进 行 切换 以 满足 图 像 在 不 同 领 域 ,如 网 页 设计 、 印 刷 、 
多 媒体 等 方面 的 应 用 。 

特效 制作 在 该 软件 中 主要 由 滤 镜 ,通道 及 各 种 工具 综合 应 用 完成 。 包 括 图 像 的 特效 
创意 和 特效 字 的 制作 ,如 油画 、 浮 雕 ` 石 襄 画 .素描 等 常用 的 传统 美术 技巧 都 可 藉 由 该 软件 
特效 完成 。 而 各 种 特效 字 的 制作 更 是 很 多 美术 设计 师 热衷 于 该 软件 研究 的 原因 。 


13.2 Photoshop CS5 工作 界面 


Photoshop CS5 的 工作 界面 由 菜单 栏 .属性 栏 .图像 编 辑 窗 口 ,状态 栏 , 工 具 箱 、 控 制 
面板 组 等 组 成 ,如 图 13. 1 所 示 。 


| wt | 
文件 f) 轴 轿 下) 图 像 () 天 层 (.) 选择 (5) 泪 樟 (T) | 分 析 (A) 30(D) 视图 (V) 一口 (W) 帮助 (H) 
~ J we ws | [z= dR J | 


图 像 编 辑 窗口 


BPGhPHr IL NRANA NO | 


图 13.1 Photoshop CS5 工作 界面 


1. 菜单 栏 


菜单 栏 为 整个 Photoshop 环境 下 所 有 窗口 提供 菜单 控制 ,包括 文件 ,编辑 .图像 、 
层 、 选 择 、 滤 镜 、 分 析 、3D、 视 图 、 窗 口 和 帮助 11 项 菜单 。 
在 Photoshop 中 可 通过 两 种 方式 执行 所 有 命令 ,一 是 菜单 ,二 是 快捷 键 或 组 合 键 。 
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2. 属性 栏 
属性 栏 是 动态 变化 的 ,选中 某 个 工具 后 ,属性 栏 就 会 改变 成 相应 工具 的 属性 设置 选项 。 
3. 图 像 编 辑 窗 口 


图 像 编 辑 窗口 是 Photoshop 的 主要 工作 区 ,用 于 显示 图 像 文 件 。 图 像 编辑 窗口 带 有 
自己 的 标题 栏 , 提 供 了 打开 文件 的 基本 信息 ,如 文件 名 、 缩 放 比 例 、 颜 色 模 式 等 。 如 同时 打 
开 两 幅 图 像 后 可 通过 单 击 图 像 编辑 窗口 标题 栏 进行 图 像 切换 。 图 像 窗 口 切换 可 使 用 组 合 
键 Ctrl 十 Tab。 


4. 工具 箱 


工具 箱 中 的 工具 可 用 来 选择 绘画、 编辑 以 及 查看 图 像 。 拖 动工 具 箱 的 标题 栏 , 可 移 
动工 具 箱 。 有 些 工具 的 右 下 角 有 一 个 小 三 角形 符号 ,这 表示 在 此 工具 位 置 上 存在 一 个 工 
具 组 ,其 中 包括 若干 个 相关 工具 。 

单 击 可 选中 工具 ,属性 栏 会 显示 该 工具 的 属性 。 


5. 控制 面板 组 


Photoshop CS5 共有 14 个 面板 ,可 通过 选中 “窗口 "菜单 一 某 个 命令 来 显示 相应 控制 
面板 。 

按 Tab 键 , 可 自动 隐藏 控制 面板 .属性 栏 和 工具 箱 组 件 ,再 次 按 Tab 键 ,显示 以 上 组 
件 。 若 按 组 合 键 Shift 十 Tab, 则 只 隐藏 控制 面板 ,保留 工具 箱 。 


13.3 ”Photoshop CS5 基本 应 用 


1. 变换 图 像 


编辑 图 像 过 程 中 有 时 需要 对 图 像 进 行 拉 伸 、 挤 压 、 旋 转 或 其 他 方式 的 更 改 。 这 些 操作 
可 以 用 “编辑 ”菜单 -~ 变换 ?选项 中 的 某 一 项 命令 来 实现 ,如 图 13. 2 所 示 。 


旋转 180 度 (1) 

~ 旋转 90 度 ( 硕 时 针 ) @) 
一 | 认 末 90 度 志 时 针 )O) 
水 平 翻转 00 

委 直 翻转 QV) 


图 13.2 变换 图 像 命令 
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各 项 命令 的 功能 如 下 。 

缩放 : 缩放 操作 通过 沿 着 水 平和 垂直 方向 拉 伸 或 挤 压 图 像 内 的 一 个 区 域 来 修改 该 区 
域 的 大 小 。 

旋转 : 允许 用 户 改变 一 个 图 层 的 内 容 或 一 个 选择 区 域 的 对 角 方 向 。 

和 斜 切 : 沿 着 单个 轴 即 水 平 或 垂直 轴 倾 斜 一 个 选择 区 域 。 斜 切 的 角度 影响 最 终 图 像 倾 
斜 的 程度 。 要 想 斜 切 一 个 选择 区 域 , 拖 动 边界 框 的 节点 即 可 。 

扭曲 : 当 扭 曲 一 个 选择 区 域 时 ,用 户 可 以 沿 着 它 的 每 个 轴 进行 拉 伸 操作 。 和 和 斜 切 不 
同 的 是 ,扭曲 不 再 局 限于 每 次 一 条 边 ,手动 一 个 角 ,两 条 相 邻 边 将 沿 着 该 角 拉 伸 。 

透视 : 透视 操作 变换 挤 压 或 拉 伸 一 个 图 层 或 选择 区 域 的 单条 边 ,进而 向 内 、 向 外 倾斜 
两 条 邻 边 。 

变形 : 变形 命令 可 以 使 图 像 进 行 任意 拉 伸 从 而 产生 各 种 变换 。 自 由 变换 的 组 合 键 是 
Ci 十 T。 


2. 选取 颜色 


网 页 中 的 色彩 有 些 是 通过 素材 图 像 自 身 的 色调 形成 的 ,而 有 些 则 是 通过 选择 .填充 制 
作出 来 的 。 在 Photoshop 中 既 可 以 独立 设置 颜色 ,也 可 以 借用 现 有 的 颜色 。 

Photoshop 中 的 “ 色 板 ”控制 面板 中 包括 多 种 模式 的 颜色 ,在 “ 色 板 ”控制 面板 中 选择 
一 种 颜色 模式 即 可 ,如 图 13. 3 所 示 。 

也 可 以 使 用 工具 箱 中 的 “吸管 "工具 单 击 素材 图 像 中 的 某 一 种 颜色 ,将 颜色 提取 到 前 
景色 中 。 


3. 图 层 管理 


对 图 层 的 基本 操作 就 是 将 构成 图 像 的 不 同 对 象 和 元 素 隔离 到 独立 图 层 上 进行 的 编辑 
操作 。 组 成 图 像 的 各 个 图 层 就 相当 于 一 个 单独 的 文档 ,相互 堆 释 在 一 起 , 透 过 上 一 个 图 层 
的 透明 区 域 可 以 看 到 下 一 个 图 层 中 的 不 透明 像素 ; 透 过 所 有 图 层 的 透明 区 域 ,可 以 看 到 背 
景 图 层 ; 最 终 在 用 户 面前 就 是 一 幅 完 整 的 平面 作品 。 

“图 层 ” 控 制 面板 中 各 个 按钮 与 选项 的 功能 如 图 13. 4 所 示 ,依据 按钮 功能 创建 各 种 功 
能 的 图 层 或 者 编辑 当前 图 层 , 为 当前 图 层 添加 效果 。 


混合 模式 总 体 不 透明 度 


内 部 不 通明 度 
可 见 性 -| 融 
sl » 全 一 锁定 

链接 添加 图 层 蒙 版 创建 新 图 层 

| 
添加 图 层 样式 和亲 组 出 队 当前 图 有 
创建 新 的 填充 或 调整 图 层 

图 13.3 “ 色 板 "控制 面板 图 13.4 “图 层 ” 控 制 面板 
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1) 图 层 的 分 类 

在 Photoshop CS5 中 ,图 层 的 类 型 有 很 多 ,了 解 并 且 掌 握 不 同类 型 图 层 的 功能 及 其 特 
点 对 于 正确 地 处 理 图 像 有 很 大 的 帮助 。 图 层 可 以 分 为 普通 图 层 文字 图 层 .填充 或 调整 图 
层 、 样 式 图 层 、 剪 贴 蒙 版 图 层 和 智能 对 象 图 层 等 。 

2) 图 层 的 混合 模式 

图 层 具有 混合 模式 是 Photoshop 最 强大 的 功能 之 一 , 它 决 定 了 当前 图 像 中 的 像素 如 
何 与 底层 图 像 中 的 像素 混合 。 使 用 混合 模式 可 以 轻松 地 制作 出 许多 特殊 的 效果 。 将 混合 
模式 分 为 以 下 六 大 类 : 

Q@ 组 合 模式 (正常 溶解); 

@ 加 深 混合 模式 ( 变 暗 ,正片 释 底 、 颜 色 加 深 、 线 性 加 深 ); 

@ 减 淡 混合 模式 ( 变 亮 , 滤 色 、 颜 色 减 淡 线性 减 淡 ); 

@ 对 比 混合 模式 ( 释 加 、 柔 光 、 强 光亮 光 、 线 性 光 、 点 光 、 实 色 混合 ); 

@ 比较 混合 模式 ( 差 值 排除 ); 

@ 色彩 混合 模式 (色相 ,饱和 度 、 颜 色 、 亮 度 )。 

3) 图 层 样 式 

图 层 样式 是 应 用 于 一 个 图 层 的 一 种 或 多 种 效果 。Photoshop 提供 了 各 种 效果 (如 阴 
影 、 发 光 和 斜面) 来 更 改 图 层 内 容 的 外 观 ,图 层 效 果 与 图 层 内 容 链接 。 移 动 或 者 编辑 图 层 
的 内 容 时 ,修改 的 内 容 会 应 用 相同 的 效果 。 

在 Photoshop 中 选择 “图 层 ” 菜 单一 “图 层 样式 ”命令 ,或 单 击 “ 图 层 ” 控 制 面板 下 方 的 
“添加 图 层 样 式 ” 按 钮 , 则 弹出 “图 层 样 式 ” 对 话 框 ,如 图 13. 5 所 示 。 


100 


图 13.5 “图 层 样 式 ” 对 话 框 


在 该 对 话 框 中 , 左 侧 是 样式 的 所 有 分 类 ,例如 投影 ,斜面 和 浮雕 ,渐变 著 加 等 。 图 层 样 
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式 可 以 多 项 选择 ,这 样 效果 会 有 更 多 的 变化 。 选 项 背景 为 蓝 色 即 表明 此 选项 处 于 工作 状 
态 , 此 时 对 话 框 中 间 部 位 将 出 现 相应 的 参数 设置 , 右 侧 是 操作 按钮 和 预览 效果 。 


4. 绘制 路 径 


路 径 是 Photoshop 中 的 重要 工具 ,主要 应 用 于 进行 光滑 图 像 选择 区 域 及 辅助 抠 图 ,绘制 
光滑 和 精细 的 图 形 .定义 画笔 等 工具 的 绘制 轨迹 、 输 出 /输入 路 径 及 和 选择 区 域 之 间 转 换 。 

Photoshop 中 的 路 径 工 具 包 括 可 以 创建 的 贝 赛 尔 路 径 工 具 、 调 整 路 径 工 具 、 选 择 路 径 
工具 ,以 及 形状 路 径 工具 ,如 图 13. 6 所 示 。 路 径 工 具 功 能 如 下 。 


国 短 开工。 1 

BWI °F 园 因 和 矩形 I 具 U 

"7 上 由 钢笔 T 具 P 国情 四 I 具 u 
[ep @SuRINR 1 
-7Bt 久 上 工具 ，。 从 路 径 选 择 工具 A 直线 工具 U 

八 转换 点 工具 [SEE A 日 FP u 

(a) 贝 赛 尔 路 径 工具 和 (b) 选择 路 径 工具 (0) 形状 路 径 工具 


调整 路 径 工具 
图 13.6 绘制 路 径 工具 


1) 贝 赛 尔 路 径 工具 

钢笔 工具 : 绘制 由 多 个 路 径 连 接 而 成 的 贝 赛 尔 曲线 。 

自由 钢笔 工具 : 可 以 自由 手绘 形状 路 径 。 

2) 形状 路 径 工 具 

矩形 工具 : 创建 矩形 路 径 。 

圆 角 矩形 工具 : 创建 圆 角 矩 形 路 径 。 

椭圆 工具 : 创建 椭圆 路 径 。 

多 边 形 工具 : 创建 多 边 形 或 者 星 形 路 径 。 

3) 选择 路 径 工 具 

路 径 选择 工具 : 选择 并 且 移 动 整个 路 径 。 

直接 选择 工具 : 选择 并 且 调 整 路 径 中 节点 的 位 置 。 

4) 调整 路 径 工具 

添加 锚 点 工具 : 在 原 有 路 径 上 添加 节点 以 满足 调整 编辑 路 径 的 需要 。 

删除 锚 点 工具 : 删除 路 径 中 多 余 的 节点 以 适应 路 径 的 编辑 。 

转换 点 工具 : 转换 路 径 节 点 的 属性 。 

注意 : 用 钢笔 工具 绘制 直线 时 ,同时 按 下 Shift 键 将 绘制 呈 45 度 的 直线 ;用 钢笔 工具 
绘制 曲线 时 ,在 节点 处 按 下 Alt 键 可 转换 曲线 方向 ,或 用 选择 工具 修改 曲线 形状 。 或 采用 
钢笔 工具 组 中 某 个 工具 修改 方向 ,比如 转换 点 工具 等 ,如 图 13.7 所 示 。 

【 例 13. 1】 在 鼠标 之 间 绘 制 拟 合 的 曲线 ,如 图 13. 18 所 示 。 操 作 步 骤 如 下 。 

(1) 用 钢笔 工具 围绕 鼠标 外 形 绘制 拟 合 曲线 。 

(2) 用 直接 选择 工具 调整 锚 点 处 的 曲线 控制 柄 ,在 合适 的 位 置 可 用 调整 路 径 工具 添 
加 或 删除 节点 ,如 图 13. 8 所 示 。 
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【 例 13.2】 利用 矩形 工具 和 直接 选择 工具 绘制 图 形 。 操 作 步 又 如 下 。 
进入 B 锚 点 时 的 方向 
~ 人 ~、 A ) 
Ac 
/ / pk 一 
A 


是 dp 
从 A 锚 点 出 发 时 的 方向 
Pt 
从 A 错 点 出 发 时 的 方向 
~ 3 Ne D 
A / 
| 
进入 B 销 点 时 的 方向 
图 13.7 用 钢笔 工具 绘制 贝 赛 尔 曲 线 图 13.8 在 鼠标 之 间 绘制 拟 合 的 曲线 


(1) 用 矩形 工具 绘制 矩形 。 
(2) 在 矩形 中 间 位 置 添加 对 称 的 4 个 节点 ,用 直接 选择 工具 选择 中 间 右 侧 的 四 个 节 
点 ,向 上 移动 ,如 图 13.9 所 示 。 


13.9 利用 和 矩形 工具 和 直接 选择 工具 绘制 图 形 图 13. 10 ”彩色 的 苹果 


【 例 13.3】 利用 绘图 工具 和 图 层 样式 绘制 ,如 图 13. 10 所 示 的 彩色 苹果 。 操 作 步 又 
如 下 。 

(1) 绘制 一 个 圆 形 ,利用 直接 选择 工具 调整 圆 的 形状 至 接近 苹果 的 形状 ,调整 苹果 上 
下 位 置 时 , 按 下 Alt 键 ,转换 节点 。 

(2) 再 绘制 苹果 被 咬 一 口 的 效果 如 图 13. 11(a) 所 示 。 单 击 椭圆 工具 ,在 属性 栏 中 按 
下 “ 打 孔 ”按钮 ,如 图 13. 11(b) 所 示 ,绘制 一 个 小 圆 。 

(3) 为 苹果 添加 图 层 样式 : 内 阴影 、 内 发 光 、 斜 面 和 浮雕 、 光 泽 、 外 发 光 等 图 层 样式 ， 
各 图 层 样式 参数 如 图 13. 12(a) 一 (e) 所 示 。 

(4) 新 建 图 层 . 用 钢笔 工具 绘制 如 图 13. 13(a) 所 示 条 状 图 形 区 域 ,并 且 填 充 相 应 颜 
色 , 在 图 层 上 创建 剪贴 蒙 版 ,最 后 调整 图 层 的 混合 模式 .上 方 彩 条 为 “ 变 亮 "效果 ,下 方 彩 条 
为 “线性 光 ” 效 果 , 如 图 13. 13(b) 所 示 。 
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图 13.12 为 苹果 添加 图 层 样式 


(a) 绘制 彩色 区 域 (b) 彩色 区 域 图 层 混合 模式 的 设置 
图 13.13 ”为 苹果 添加 色彩 及 发 光 效 果 
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5. 色彩 调整 


在 Photoshop 中 ,要 想 做 出 精美 的 图 像 , 色 彩 模式 的 应 用 和 色彩 的 调整 是 必 不 可 少 
的 。 打 开 一 幅 图 像 ,选择 “图 像 " 菜 单 ~“ 调 整 ” 选 项 中 的 某 项 命令 ,如 亮度 /对 比 度 、 色 阶 、 
曲线 、 色 相 / 饱 和 度 .通道 混合 器 ` 反 相 、 阔 值 .变化 替换 颜色 等 指令 ,如 图 13. 14 所 示 。 


画 柄 困 晶 图 层 (L) 选择 (5) 滤 樟 (T) 分 析 (A) 3D(D) 祝 图 (V) 窗口 (WW; 
模式 0) 


ko aor m | a yt: 
亮度 /对 比 度 5) 
自动 色 油 员 sitter | 全 Be 
自动 对 比 度 0 如 ttShi fttCtrltL | 理光 度 ) 
自动 颜色 (0) Shi ft+Ctr14B 
图 像 大 小 [I) LttCtrl#I ed: Cua 
画布 大 小 G) 各 ttCtrltC rm 时 
、| 色彩 平衡 B) CtrltB 

图 如 潍 种 6) 黑白 加) 如 t+ShifttCtrl4B 

照片 庆 镜 ) 
pe 通道 混合 器 0) 

反 相 立 ) CtrlI 
复制 0) 
应 用 图 从 Y) pd 
Cred 渐变 映 有 G) 

;| ”可 选 颜色 G) 

阴影 /高 光 0 

JDR 色调 

变化 

去 色 O) Shi ftfCtrl4U 

oR, 0) 

著 换 颜色 G) 


色调 均 化 四 ) 


图 13.14 色彩 调整 


【 例 13. 4】 调整 色彩 ,让 照片 具有 古色 古 香 的 效果 ,如 图 13. 15 所 示 。 


(a) 原 图 (b) 处 理 后 的 古色 古 香 风 格 的 图 像 
图 13.15 调整 色彩 ,改变 图 像 风格 


操作 步骤 如 下 。 

(1) 打开 一 张 照 片 , 先 把 背景 复制 出 3 个 背景 副本 ,如 图 13. 16Ca) 所 示 。 

(2) 选择 “背景 -副本 ?图 层 ,选择 菜单 “图 像 ” 莱 单一 调整 ”一 去 色 ” 命 令 , 在 打开 的 
对 话 框 中 设置 亮度 。 对 比 度 参数 .如 图 13. 16(b) 所 示 。 

(3) 选择 “背景 -副本 2? 图 层 , 然 后 选择 “图 像 " 莱 单一 "调整 ”一 照片 滤 镜 ”命令 ,选择 
黄色 ,然后 把 浓度 调 到 100。 
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图 13.16 色彩 调整 


(4) 选中 “背景 -副本 ”图 层 , 把 图 层 混合 模式 改 为 “明度 ”。 
5) 再 次 选中 “背景 -副本 2 图 层 , 把 图 层 模式 改 为 “ 蚕 加”。 
(6) 选中 “背景 - 人 "图 层 ,用 魔术 棒 选 中 空白 处 ,保持 选取 , 单 击 “ 选 择 ” 菜 单一 “ 修 
改 ” 选 项 一 羽化 ”命令 ,在 打开 的 对 话 框 中 设置 羽化 为 5 像素 ,如 图 13. 16(c) 所 示 。 
(7) 在 “图 层 ” 控 制 面 板 上 单 击 * 添 加 填充 图 层 " 按 钮 ,选择 渐变 填充 样式 ,颜色 选 为 黄 
色 ,参数 设置 如 图 13. 16(d) 所 示 。 
(8) 最 后 再 为 图 像 添 加 些 边框 和 文字 ,一 幅 充 满 古 城 特 色 的 照片 就 完成 了 。 


6. 应 用 滤 镜 


滤 镜 是 Photoshop 的 特色 之 一 ,具有 强大 的 功能 。 滤 镜 产生 的 复杂 的 数字 化 效果 源 
自 摄影 技术 。 滤 镜 不 仅 可 以 改善 图 像 的 效果 而 且 可 掩盖 图 像 的 缺陷 ,还 可 以 在 原 有 图 像 
的 基础 上 增加 许多 特殊 的 效果 。Photoshop 的 内 置 滤 镜 共有 17 组 ,可 通过 “ 滤 镜 ”菜单 进 
行 访问 。 
1) 滤 镜 库 
自从 在 Photoshop CS 中 引入 了 滤 镜 库 命 令 后 ,Photoshop 就 对 很 多 滤 镜 都 提供 了 一 
站 式 访问 。 这 是 因为 在 滤 镜 库 对 话 框 中 包含 6 组 滤 镜 ,这 样 在 执行 滤 镜 命令 时 ,特别 是 想 
对 一 幅 图 像 尝 试 不 同 效 果 时 ,就 无 须 在 滤 镜 之 间 跳 来 跳 去 ,而 能 在 同一 个 对 话 框 中 设置 不 
同 的 滤 镜 效果 。 要 访问 滤 镜 库 , 可 以 选择 * 滤 镜 ? 莱 单一 “ 滤 镜 库 ” 命 令 ,打开 滤 镜 库 对 话 
框 ,如 图 13. 17 所 示 , 滤 镜 库 对 话 框 的 名 称 是 跟随 能 选择 滤 镜 的 名 称 而 定 的 。 


图 13.17 “ 滤 镜 库 ” 对 话 框 


滤 镜 库 最 大 的 在 于 应 用 滤 镜 的 显示 方式 与 图 层 相 同 。 在 默认 情况 下 , 滤 镜 库 中 只 有 
一 个 效果 图 层 , 单 击 不 同 的 滤 镜 缩 略 图 ,效果 图 层 会 显示 相应 的 滤 镜 命令 。 

要 想 在 保留 滤 镜 效果 的 同时 添加 其 他 滤 镜 ,可 以 单 击 滤 镜 库 对 话 框 右 下 角 * 新 建 效 果 
图 层 "按钮 ,如 图 13. 17 所 示 ,创建 与 当前 相同 滤 镜 的 效果 图 层 , 然 后 在 新 建 图 层 应 用 其 他 


滤 镜 即 可 。 
2) 智能 滤 镜 


虽然 滤 镜 库 中 的 效果 图 层 可 以 为 同一 个 图 像 添加 两 个 以 上 的 滤 镜 效果 ,但 是 只 限于 
在 滤 镜 库 对 话 框 中 。 一 旦 关闭 滤 镜 库 对 话 框 ,作用 的 图 像 将 无 法 再 次 查看 混合 滤 镜 中 的 
单个 效果 。Photoshop CS5 的 新 增 功能 中 的 智能 滤 镜 功能 解决 了 这 一 问题 。 

在 执行 滤 镜 命令 之 前 ,首先 执行 “ 滤 镜 "菜单 “转换 为 智能 滤 镜 ”命令 ,当前 图 层 缩 览 
图 即 出 现 智能 对 象 图 标 。 接 着 选择 “ 滤 镜 ”菜单 中 的 某 项 * 滤 镜 " 命 令 , 智 能 图 层 出 现 滤 镜 
效果 图 层 , 如 图 13. 18 所 示 。 若 继续 选择 执行 “ 滤 镜 ”菜单 中 的 某 项 * 滤 镜 ” 命 令 ,会 发 现 滤 
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图 13.18 滤 镜 效果 图 层 


镜 效果 图 层 中 继续 出 现 相 对 应 的 滤 镜 效果 名 称 , 如 
图 13. 18 所 示 。 

滤 镜 效果 名 称 左 侧 带 有 眼睛 图 标 , 隐 藏 其 中 一 个 眼睛 
图 标 , 相 应 的 滤 镜 效果 被 隐藏 ,而 最 终 滤 镜 效 果 发 生变 化 。 

编辑 智能 滤 镜 与 编辑 图 层 样式 一 样 , 可 以 双击 滤 镜 效 
果 命 令 ,再 次 设置 滤 镜 参数 ,替换 原来 的 效果 。 

因为 使 用 多 个 滤 镜 命令 得 到 的 是 其 混合 效果 ,所 以 智 
能 滤 镜 效果 既 可 以 隐藏 :也 可 以 通过 调换 顺序 来 更 改 混 合 
效果 。 
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7. 通道 与 蒙 版 


Photoshop 中 的 通道 与 蒙 版 是 两 个 高 级 编辑 功能 。 通 道 是 存储 不 同类 型 信息 的 灰 度 
图 像 , 对 用 户 编辑 的 每 一 幅 图 像 都 有 着 巨大 的 影响 ,是 Photoshop 必 不 可 少 的 一 种 工具 。 
蒙 版 用 来 保护 被 遮蔽 的 区 域 ,具有 高 级 选择 功能 ,同时 也 能 够 对 图 像 的 局 部 进行 颜色 的 调 
整 , 而 使 图 像 的 其 他 部 分 不 受 影响 。 

1) 通道 

通道 最 主要 的 功能 是 保存 图 像 的 颜色 数据 。 例 如 ,一 个 RGB 模式 的 图 像 ,其 每 一 个 
像素 的 颜色 数据 是 由 R、G、B 这 3 个 通道 来 记录 的 ,而 这 3 个 颜色 通道 组 合 定义 后 即 合成 
了 一 个 RGB 主 通 道 。 


通道 包括 颜色 信息 通道 和 Alpha 通道 。 图 像 默认 是 由 颜色 信息 通道 组 成 的 ,Alpha 
通道 主要 用 来 保存 选区 ,这 样 就 可 以 在 Alpha 通道 中 变换 选区 ,或 者 编辑 选区 ,得 到 具有 
2) 蒙 版 


蒙 版 用 来 控制 图 像 的 显示 与 隐藏 区 域 , 是 进行 图 像 合 成 的 重要 途径 。 蒙 版 包括 快速 
蒙 版 .剪贴 蒙 版 ,图 层 蒙 版 与 形状 蒙 版 等 。 蒙 版 填充 时 ,黑色 区 域 将 被 隐藏 ,白色 区 域 可 
见 ,而 蒙 版 中 的 灰色 区 域 会 根据 其 灰 度 值 呈现 出 不 同 层次 的 半 透 明 效 果 。 

【 例 13.5】 抠 图 合成 创意 实例 ,素材 如 图 13. 19 所 示 ,效果 图 如 图 13. 20 所 示 。 


13.20 抠 图 合成 创意 效果 图 
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本 实例 主要 涉及 如 何 细致 抠 图 ,图 层 混合 模式 的 理解 ,通过 “色相 /饱和 度 " 调 整 对 颜 
色 的 不 同 影响 ,以 及 通道 的 应 用 等 知识 点 。 

(1) 抠 图 ( 孔 汰 ) : 为 了 保证 最 终 图 像 的 清晰 度 , 首 先 将 图 像 放 大 ,在 完成 抠 图 之 后 再 
把 图 像 缩 小 回 原始 大 小 。 将 图 像 整体 用 "图 像 ” 一 图像 大 小 ?命令 放大 ,参数 设置 如 
图 13. 21(a) 所 示 ,将 单位 改 为 “百分比 ”, 勾 选 “ 约 束 比 例 ? 复 选 框 ,把 图 像 宽度 高 度 都 设置 
为 原来 的 400%。 


色相 /饱和 度 


厂 像 案 大 小 :15,0M( 之 前 为 959,8K) 
宽度 (W): [400 [ak 国 
高度 (H): [400 百人 比 国 


文档 大 小 ; 
宽度 (D): |39.51 


高 项 (G): [20.42 
人 可 Ri: [130 他 二 / 贡 二 国 


回 缩放 样式 (Y) 口 着 色 (D) 


加 约束 比 全 (c) I AA Camp) 
回 秆 定 图 伯 便 案 (1): 


两 次 立方 ( 适用 于 王 沦 渐 去 ) 图 | 


(a) 成 比例 放大 医 


和 RE): | 自 定 
通道 (0): | 至 副本 
输入 色 及 (1); 


(0) 调整 色 阶 
图 13.21 为 孔 省 图片 抠 图 


(2) 复制 背景 层 ,选择 "图 像 " 莱 单一 "调整 ”一 "色相 /饱和 度 ” 命 令 , 对 “图 像 ” 的 颜 
色 进 行 调整 ,把 黄色 的 草地 变 为 绿色 ,同时 将 颜色 饱和 度 提高 ,参数 设置 如 图 13. 21(b) 
所 示 。 

(3) 单 击 “ 通 道 ” 面 板 .经 过 步骤 (1)、(2) 的 调整 之 后 ,在 蓝 色 通 道中 ,黑白 最 为 分 明 。 
将 蓝 色 通道 复制 两 份 ,对 通道 的 色 阶 进行 调整 ,将 羽毛 旁边 的 杂 草 去 掉 ,“ 蓝 -副本 "输入 色 
阶 中 间 值 为 0. 26 .如 图 13.21(c) 所 示 。“ 蓝 -副本 2” 输 入 色 阶 的 中 间 值 为 0. 37。 

(4) 按 住 Ctrl 单 击 “ 蓝 -副本 2” 图 层 , 将 “ 蓝 -副本 2” 通 道 载 和 选区 。 按 组 合 键 Ctrl 十 
HH, 将 选区 隐藏 。 这 时 看 不 到 选区 ,但 是 选区 是 起 作用 的 ,这 样 方便 我 们 直观 地 进行 修理 。 
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进入 “ 蓝 -副本 ”通道 .选择 一 个 较 软 的 画笔 ,使 用 白色 ,降低 画笔 不 透明 度 至 25%， 
在 羽毛 损失 比较 厉害 的 地 方 涂 一 涂 , 可 以 看 到 羽毛 会 被 慢 慢 加 上 (注意 : 不 要 把 杂 草 的 
图 像 也 给 涂 出 来 )。 这 种 方法 可 以 结合 两 个 通道 的 优点 ,而 将 多 余 的 部 分 完美 地 过 
滤 掉 。 

完成 后 按 组 合 键 Ctrl 十 D 取消 选择 。 如 果 最 后 发 现 还 是 有 杂 草 的 图 像 在 里 边 , 可 以 
用 软 的 黑色 画笔 ,降低 不 透明 度 ,在 多 余 的 图 像 上 慢 慢 修复 。 

(5) 将 图 像 缩 小 为 最 初 打开 时 的 大 小 。 羽 毛 被 最 大 限度 保留 。 

(6) 按 组 合 键 Ctrl 十 A 全 选修 好 的 通道 后 复制 。 这 里 不 用 “图 层 ” 面 板 来 完成 合成 ， 
而 直接 使 用 通道 中 做 好 的 图 像 来 合成 作品 。 打 开 前 面 提供 的 背景 图 像素 材 , 粘 贴 在 新 
层 中 。 

(7) 将 此 图 层 的 混合 模式 改 为 “ 滤 色 ”, 黑 色 将 被 去 除 。 

(8) 打开 美女 的 图 片 素材 ,用 魔术 棒 选 择 外 边 的 白色 部 分 ,再 反选 ,用 移动 工具 将 美 
女 拉 和 人 图像 中 , 按 组 合 键 Ctrl 十 工 ,自由 变换 美女 图 像 的 大 小 ,最 后 合成 图 片 ,完成 如 
图 13. 20 所 示 效 果 。 


13.4 “Photoshop CS5 网 页 设计 


本 节 以 网 页 设计 实例 入 手 , 讲 述 了 如 何 利用 Photoshop CS5 进行 网 页 设计 。 以 具象 
的 操作 ,逐一 向 读者 展示 Photoshop 在 网 页 设计 的 强大 功能 。 本 节 主 要 讲解 了 素材 的 导 
入 与 处 理 \ 公 司 名 称 的 设计 、 导 航 栏 的 制作 方法 、Banner 的 设计 、 产 品 图 像 轮 播 显 示 区 的 
设计 ,整个 页 面 的 布局 与 修饰 ,网 页 效果 如 图 13. 22 所 示 。 


1. 新 建 一 个 文件 


新 建 一 个 合适 大 小 的 文件 ,尺寸 为 1500X2000( 像 素 ) 。 一 般 是 根据 屏幕 分 辩 率 来 定 
义 宽 度 尺 寸 ,这 里 采用 1440X 900( 像 素 ) 的 屏幕 分 辩 率 ,网 页 内 容 的 两 边 需 露 出 背景 , 因 
此 宽度 设置 得 要 大 一 些 , 最 终生 成 网 页 时 ,可 缩小 图 像 , 裁 切 多 余 的 画布 ,以 适应 较 低 的 分 
辩 率 ;高 度 则 根据 网 页 内 容 的 需要 进行 调整 。 

2. 导入 素材 

将 背景 导入 到 Photoshop 中 。 调 整 背景 尺寸 为 1500 X 2000( 像 素 ) ,使 其 铺 满 画布 ， 
如 图 13. 23 所 示 。 

注意 : 在 选择 背景 素材 时 ,素材 的 尺寸 最 好 不 小 于 网 页 页 面 的 尺寸 ,这 样 就 无 须 放 大 
背景 图 像 ,否则 可 能 会 降低 背景 图 像 的 浏览 效果 。 


3. 设计 公司 名 称 


选择 “文字 ”工具 ,设置 字体 颜色 为 白色 ,字体 大 小 为 72px, 输 入 公司 的 名 字 。 双 击 此 
图 层 添加 “图 层 样式 ”。 
“投影 ”: 颜色 为 #0a93d9, 其 他 参数 如 图 13. 24(a) 所 示 。 
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导航 栏 一 三 一 得 。 关 于 我 们 产品 展示 。 服务 内 容 。 企业 文化 。 联系 方式 站 双 一 “搜索 框 
a 
-A 


先进 的 生产 线 
玉生 水 设备 是 以 有 两 全 压力 关 为 动力 ， 以 机 要 障 
/ 分 和 于 为 基本 的 一 入党 分 丙 ， 合 用 压力 党 为 | 
Banner 0 ps—0 os Die 0 un EF 
物质 的 分 天 六 汶 、 提 结 。 起 六 过 程 无 相 转化 ,党 昌 
氛 作 ， 对 热 生性 物质 的 分 下 为 适宜 ， 并 具有 让 好 的 出 
演 、 而 台 台 和 笛 和 化 性 能 ， 能 在 90 以 下 ，PH 为 2-1 


饮用 碳酸 矿泉 水 能 增进 消化 液 的 分 沁 ， 协 助 骨 肠 的 消化 ， 而 且 有 洗涤 组 织 和 稀 丢 尿 
浓度 的 效用 ， 因 而 对 治愈 肠 胃病 ， 十 二 指 肠 渍 病 、 慢 性 肝炎 、 便 秘 、 胆 结石 、 芭 和 盏 炎 ， 
卡 他 性 膀胱 及 慢性 喉 炎 、 支 气管 炎 等 都 具有 较 好 的 医疗 效果 


XXX 矿泉 水 


产品 图 像 
轮 显 区 


环境 优美 的 生产 基地 
进入 单 器 30 米 、 长 125 米 、 量 高 处 达 18 来 的 主 厂 房 ， 正 在 忙碌 运 
作 的 数 条 一 革 水 和 两 条 桶 装 水 生产 线路 入 邮 仙 。 如 此 宏大 的 
规模 只 风琴 窗 十 余 名 工人 ， 让 我 们 多 少 有 些 图 路 。 央 总 经 理 印 利 年 
解释 说 ， 矿 浊 水 生产 从 欢 瑟 到 版 子 无 昔 消 中 、 清 洗 ， 洪 装 ， 封 兰 帮 
实现 了 全 自动 化 操作 ， 一 切 工艺 村 在 gp 等 级 百 级 净化 间 全 自动 一 体 
化 完成 ， 完 全 在 无 蓝 环 境 下 扒 作 ， 即 便 所 有 生产 妓 网 时 运行 ， 车 税 
内 的 工人 也 只 有 几 十 名 ， 而 且 大 多 是 负责 看 护 、 调 试 机 闫 - 
质量 是 企业 的 生命 线 ， 早 在 1998 年 ，XX 公 司 已 通过 国际 1309002 认 证 ， 随 后 又 开始 与 入 Maccp 食 品 安全 管理 体系 ，XX 
一 直至 持 不 断 创新 ，2003 年 推出 策 具 个 性 的 五 加 仑 钻石 形 专利 橘 ， 便 于 消费 者 识 草 ， 杜 总 早 水 、 钥 水 、 黑 桶 而 景 田 矿 
梨 水 生产 基地 投产 后 ， 对 水 源 的 周边 环境 严格 把 关 ， 芭 目 水质 受到 影响 。 而 员工 的 生活 区 也 设 在 非 生产 基地 ， 进 兔 7 生 
颖 污 热 。 好 田 计划 明年 引入 国际 先进 的 “ 欢 洪 遇 ”一 条 龙 生 产 烤 ， 可 葡 少 部 分 生产 环节 ， 矿 梨 水 与 空气 的 禄 骨 时 间 更 姑 
。 对 于 枉 装 水 的 回收 清洗 ， 符 改变 传 纺 的 工艺 模式 ， 采 用 新 的 技术 设计 ， 对 于 清洗 的 温度 ， 硒 基 范 国 等 进行 改良 ， 进 一 
步 保 清 节 能 省 水 同时， 在 生产 过 程 中 ， 增 加 自动 在 乒 葵 控 承 统 ， 对 矿 消 水 的 状态 随 时 保持 监控 - 


有机质 有 Copyr iahe cl scot-3013 首页 关于 我 人 产品 展示 服务 内 容 企业 六 化 ”联系 方式 


图 13.22 某 某 饮用 水 公司 网 站 首页 设计 效果 图 


图 13.23 ”背景 导入 至 网 页 图 像 中 


“渐变 释 加 ”: 颜色 为 并 提 们 和 一 并 ff, 其 他 参数 如 图 13. 24(b) 所 示 ,公司 名 称 文字 


结构 
混合 模式 (6); [正片 委 底 司 力量 "…:= 
不 透明 度 (0); 一 lo0 % 
角度 (a): (De 度 友 使 用 全 所 yt(@) 
扩展 BB); 人 一 一 E % 
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温 合 模式 (Q): | 正常 司 


大 小 B): cA 一 一 一 一 [5 ” 侧 索 不 适 明 度 (p): 一 一 一 一 由 % 
Er 2 | 
): 你 与 图 层 ; 
sa [ A] = aaau 
gt (1) 度 
杂 (N): OO 一 司 ”% 
3 缩放 9D): 一 人 一 一 记 >% 
设 要 为 陵 售 复位 为 陵 住 | _ 设 轩 为 隐 兴 全 | 复位 为 陵 信 | 
(a) 投影 效果 (b) 渐变 又 加 


(9 公司 名 称 的 设计 
图 13.24 


效果 如 图 13. 24(c) 所 示 。 
4. 制作 导航 条 


(1) 设计 导航 条 。 选 择 * 圆 角 矩 形 ” 工 具 , 设 置 填充 颜色 为 白色 , 圆 角 半径 为 15px, 绘 
制 一 个 圆 角 矩形 ,矩形 尺寸 小 于 整体 背景 ,设置 图 层 的 不 透明 度 为 70%。 

输入 导航 文本 ,如 : 首页 .关于 我 们 .产品 展示 等 ,每 一 个 导航 文本 之 间 有 一 定 的 
间隔 。 

(2) 将 “首页 "文本 部 分 制作 为 按钮 样式 。 将 “首页 "文本 的 字体 颜色 设置 成 白色 , 选 
择 “ 圆 角 和 矩形 ”工具 ,设置 圆 角 半径 为 15px, 填 充 颜 色 为 黑色 ,绘制 一 个 大 于 文本 的 圆 角 和 矩 
形 。 双 击 此 图 层 添 加 “图 层 样式 ”。 

“投影 ”: 颜色 为 白色 ,其 他 参数 如 图 13. 25(a) 所 示 ; 

“ 浙 变 全 加 ”: 填充 颜色 为 #0270bc 到 # 148bcf, 其 他 参数 如 图 13.25(b) 所 示 。 

(3) 制作 搜索 框 。 选 择 * 圆 角 和 矩形” 工具 ,设置 圆 角 半 径 为 15px, 填 充 颜 色 为 白色 , 绘 
制 圆 角 和 矩形。 双击 此 图 层 添加 * 混 合 选项 ”和 * 内 阴影 ”图 层 样式 。 

“混合 选项 "模式 :“ 不 透明 度 ” 为 100,“ 填 充 不 透明 度 ” 为 0, 其 他 参数 如 图 13. 26(a) 
所 示 。 

“内 阴影 模式:“ 混 合 模式 ”为 “正片 芭 加 ”, 颜 色 为 #02633a4, 其 他 参数 如 图 13. 26(b) 
所 示 。 

导入 素材 中 的 “放大 镜 ” 图 像 。 导 航 栏 的 整体 效果 如 图 13. 27 所 示 。 


广 投影 
结构 
混合 很 式 (| 正片 释 店 司 国生 "= 
不 透明 度 (Q); 呈 ———oho % 
mai(] )— 友 合用 全 局 X(@) 渐变 要 加 
距离 QO): 从 一 一 一 一 7 作 素 be 
扩展 RB): 导 一 一 局 ”% 温 全 模式 (0): [ 正 学 辐 
大 人 N59): co 一 一 [5 侧 家 不 EE) 一 而 ” 
WF MRA 
出生 [RE 辐 民 与 四 导 对 1(D 
smut A] -aasau ny: (1) 后 ] 度 
i 二 pw 针 扩 (9): 一 0 一 一 后 
图 层 近 空投 于 (WD 
[这 可以 什 | ,复位 为 陵 U 信 | 证 | .复位 为 陵 信 | 


(3) “投影 "样式 参数 (b) “渐变 县 加 ”样式 参数 
图 13.25 设计 导航 条 文本 样式 


混合 选项 
第 规 混合 
混合 模式 (D): [ 正 党 司 
TB9go 一 而 | 
内 阴影 
高 级 混合 结构 
人 es 和 提醒 6) [下 AS 辐 国 本 
二 本 不 透明 度 (0); 一 一 OJ00 % 
皂 裤 QW): 
万 将 内 部 效果 混合 成 组 (D 角度 (A); (OD Bo ”| 度 网 使 用 全 局 yt(6) 
所 将 加 贴图 层 混合 成 组 @) 
克 对 明天 加 距 训 Dj -一 记 一 们 
a 站 阳 塞 OO: 一 局 % 
大 八 5):; 史 一 一 一 一 | 像素 
三 混 人 颜色 硕 (E): [ 交 色 国 
三 品质 
本 图 层 : 0 255 
Lan ss: | 1| 三 消除 饮 兴 ( 
下 一 图 层 。 0 2 杂 (N):O 一 一 一 一 司 ”% 
ER 
= -| nme | nme | 


(a) “混合 选项 "样式 参数 (b) “内 阴影 "样式 参数 


图 13.26 设计 搜索 框 样式 


al 
服务 内 容 。 企业 文化 。 联系 方式 ( [ 


se 
图 13.27 导航 条 


关于 我 们 ”产品 展示 


5. 制作 Banner 
(1) 制作 Banner 的 背景 。 选 择 * 圆 角 和 矩形 ?工具 ,设置 圆 角 半径 为 15px. 填 充 颜色 为 
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白色 ,在 导航 条 下 方 绘制 一 个 较 大 的 圆 角 矩形 ,将 不 透明 度 设置 为 70%% 。 

(2) 制作 图 片 播放 区 域 。 选 择 * 圆 角 和 矩形 ?工具 ,设置 圆 角 半径 为 15px, 填 充 颜 色 为 
黑色 ,在 左 侧 绘制 一 个 约 有 Banner 背景 一 半 的 圆 角 矩形 。 双 击 此 图 层 添加 “投影 ”和 * 渐 
变 释 加 ”图 层 样 式 ,参数 如 图 13. 25 中 (a) 和 (b) 所 示 。 

(3) 导入 素材 图 片 , 移 动 至 Banner 色 块 区 域 中 ,双击 此 图 层 添加 “内 阴影 "和 “ 描 边 ” 


“图 层 样式 ”。 
“内 阴影 ?样式 : 混合 模式 为 “正片 琶 底 ” ,颜色 为 黑色 ,其 他 参数 如 图 13. 28(a) 
所 示 。 
| 
[ew | 
温 合 模式 (8); | 正片 得 语 了 ] 国 加 大 小: 人 一 一 一 一 同 ” 境 索 
不 通明 度 0):; 一 一 一 2 一 古 % 位 置 p): [外 部 园 
mn: (|) 克 使 用 全 局 光 (G) 混合 模式 加 :| 正 党 司 
不 通明 度 (0): 一 一 一 oJ00 % 
耻 离 D0): A 一 一 一 一 所。 保 素 
朋 宪 (0 A 一 一 个”% 厂 十 和 类 型 ph [本 色 加 
大 45)， EC 一 0 人 壤 素 颜色 : 国 国 :0.…= 
品质 
st: | 人] sau 
杂 色 Ni 一 P ”% 
TIE | | 


(a) “内 阴影 "样式 参数 
图 13.28 添加 图 层 样式 


(b) “ 描 边 "样式 参数 


“ 描 边 ”样式 : 颜色 为 #219ee5 ,其 他 参数 如 图 13. 28(b) 所 示 。 
(4) 添加 企业 生产 信息 。 在 Banner 右 侧 添加 
“先进 的 生产 线 ” 一 段 文本 信息 ,再 添加 一 个 “了 解 
更 多 ”按钮 ,按钮 的 图 层 样 式 设置 为 “投影 "和 “渐变 | 三 章 
车 加 ”, 参 数 如 图 13. 25 中 (a) 和 (b) 所 示 。 ED 
(5) 制作 切换 图 片 的 播放 按钮 组 。 选 择 “ 和 矩形 ” 
工具 ,设置 填充 颜色 为 黑色 ,绘制 圆 角 和 矩形 ,双击 此 
图 层 添加 “投影 "和 “渐变 蕉 加 ”图 层 样 式 , 参 数 如 


阴影 
图 13. 25 中 (a) 和 (b) 所 示 。 再 选择 “椭圆 "工具, 填 角度 (N): 站 
充 颜色 为 #e8e8e8 . 按 下 Shift 键 绘制 小 正 圆 , 设 置 此 OC 
圆 为 “按钮 ”效果 ,双击 此 层 添加 “斜面 与 浮雕 ”图 层 S| -| Ds) 


样式 , 样式 为 “内 和 斜面 ”, 方 法 为 “平滑 ”, 如 二 式 (H): | 廊 包 图 
图 13. 29 所 示 。 最 后 绘制 多 个 圆 ,填充 颜色 为 “ 白 阴影 模式 (A): 正片 和 启 加 | 
色 ”, 添 加 上 述 相 同 的 图 层 样 式 , 形 成 播放 按钮 组 。 Ss 

Banner 效果 如 图 13. 30 所 示 。 图 13.29 ”斜面 和 浮雕 


先进 的 生产 线 

本 泉水 设备 是 以 腊 两 侧 压力 差 为 动力 ， 以 机 械 入 
分 原理 为 基础 的 一 种 溶液 分 离 ， 使 用 压力 通常 为 
0. 2MWPa 一 0. 6MPa. 分 高 孔径 1nm 一 0. 1 m. 可 广泛 应 用 于 
物质 的 分 亢 、 浓缩 、 提 纯 。 超 过 过 程 无 相 转 化 ,常温 
操作 ， 对 热 敏 性 物质 的 分 离 万 为 适宜 ， 并 具有 良好 的 而 
光 、 耐 酸 碱 和 而 氧化 性 能 ， 能 在 60T 以 下 ，PH 为 2-11 
Cr 


图 片 
播放 区 


图 片 切 换 的 播放 按钮 组 
图 13.30 Banner 


6. 制作 主体 内 容 区 
主体 内 容 区 效果 图 如 图 13. 31 所 示 。 


饮用 碳酸 矿泉 水 能 增进 消化 液 的 分 泥 ， 协 助 骨 肠 的 消化 ， 而 且 有 洗涤 组 织 和 稀释 尿 
浓度 的 效用 ， 因 而 对 治愈 肠胃 病 、 十 二 指 肠 溃 病 、 慢 性 肝炎 、 便 秘 、 胆 结石 、 肾 孟 炎 ， 
卡 他 性 膀胱 及 慢性 喉 炎 、 支 气管 炎 等 都 具有 较 好 的 医疗 效果 


XXX 矿泉 水 


环境 优美 的 生产 基地 
进入 单 中 30 米 、 长 125 米 、 最 高 处 达 18 米 的 主 厂房 正在 忙碌 运 
作 的 数 条 瓶装 水 和 两 条 桶 装 水 生产 线 跃 入 眼帘 然而， 如 此 宏大 的 
规模 只 见 密 事 十 余 名 工人 ， 让 我 们 多 少 有 些 图 栈 。 副 总 经 理 部 利 年 
解释 说 ， 矿 泉水 生产 从 吹 基 到 叛 子 无 苗 消 毒 、 清洗、 灌 装 、 圣 益 都 
实现 了 全 自动 化 操作 ， 一 切 工艺 都 在 MP 等 级 百 级 净化 阁 全 自动 一 体 
化 完成 ， 完 全 在 无 苗 环 境 下 的 作 。 妈 便 所 有 生产 线 同时 运行 ， 车 则 
内 的 工人 也 只 有 几 十 名 ， 而 且 大 多 是 负责 看 护 、 调 试 机 器 ， 
质量 是 企业 的 生命 线 ， 早 在 1998 年 ，XX 公 司 已 通过 国际 1S09002 认 证 ， 随 后 又 开始 导入 Haccp 食 品 安全 管理 体系 ，XX 
一 直 坚持 不 断 创新 ，2003 年 推出 极 具 个 性 的 五 加 仑 钻石 形似 利 桶 ， 便 于 消费 考 识别 ， 杜 绝 黑 水 、 颁 水 ， 黑 桶 而 景 田 矿 
条 水 生产 基地 搜 产 后 ， 对 水 源 的 周边 环境 严格 把 关 ， 防 止 水 质 受到 影响 ， 丙 吴 工 的 生活 区 也 设 在 非 生产 基地 ， 台 免 了 生 
活 污染 。 最 田 计划 明年 引入 国际 先进 的 “网 灌 封 ”一 条 龙 生产 线 ， 可 减少 部 分 生产 环节 ， 矿 泉水 与 空气 的 接触 了 时间 更 短 
。 对 于 本 装 水 的 回收 清洗 ， 将 改变 传统 的 工艺 模式 ， 采 用 新 的 技术 设计 ， 对 于 清洗 的 温度 、 履 关 范 国 等 进行 改良 ， 进 一 
步 保洁 节能 省 水 。 同时， 在 生产 过 程 中 ， 增 加 自动 在 线 监控 系统 ， 对 矿泉 水 的 状态 随时 保持 监控 - 


图 13.31 主体 内 容 区 


(1) 制作 主体 内 容 背 景 。 选 择 “ 圆 角 和 矩形 "工具 ,设置 圆 角 半径 为 5, 填充 颜色 为 白色 ， 


绘制 适当 大 小 矩形 ,图 层 不 透明 度 为 75%% 。 
(2) 制作 公告 栏 : 在 主体 内 容 的 项 部 输入 相应 的 广告 文字 ,“ 饮 用 碳酸 矿泉 水 能 增 


(3) 制作 产品 展示 区 : 选择 “ 圆 角 和 矩形 "工具 ,设置 圆 角 半 径 为 5, 填充 颜色 为 黑色 , 绘 
制 圆 角 和 矩 形 , 双 击 此 图 层 添加 ,“ 投 影 " 和 “渐变 番 加 ”图 层 样式 ,参数 如 图 13. 25 中 (a) 和 


(b) 所 示 。 
(4) 导入 产品 素材 图 片 ,适当 调整 图 片 尺寸 ,双击 此 图 层 , 添 加 “投影 "和 “渐变 释 加 ” 
图 层 样式 ,参数 如 图 13. 25 中 (a) 和 (b) 所 示 , 复 制 多 个 .依次 排列 。 


ee [ 第 13 章 利用 Photoshop 设 计 网 页 ] Ke 


(5) 绘制 向 左 和 向 右 的 箭头 ,双击 此 层 添加 “发 光 ”" 和 “颜色 番 加 ”图 层 样式 ,参数 自 


(6) 添加 图 片 和 文本 内 容 。 导 入 企业 外 景 素材 ,输入 企业 简介 的 文本 。 

7. 底部 横 条 的 设计 

(1) 选择 “矩形 ?工具 ,设置 颜色 为 灰 蓝 色 #0473be, 绘 制 一 个 矩形 。 双 击 此 图 层 添 加 
“投影 "和 “渐变 盖 加 ”图 层 样式 ,参数 如 图 13. 25 中 (a) 和 (b) 所 示 。 

(2) 导入 素材 图 片 , 输 入 文本 。 


(3) 添加 底部 信息 : 在 网 页 底部 添加 相应 的 版 权 信 息 和 底部 导航 信息 。 
效果 如 图 13. 32 所 示 。 


熏 便捷 的 服务 图 放心 的 水 源 


看 。 优势 的 从 位 酷 清 总 
首页 基于 我 们 产品 展示 “服务 内 容 企业 文化 联系 方式 


图 13.32 底部 效果 
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本 章 小 结 


本 章 主 要 介绍 了 如 何 利 用 Photoshop 进行 网 页 设计 ,主要 内 容 包 括 : 
(1) Photoshop CS5 简介 。 

(2) Photoshop CS5 的 基本 操作 与 主要 功能 。 

(3) 利用 Photoshop CS5 软件 平面 设计 。 

(4) 利用 Photoshop CS5 软件 设计 网 站 首页 。 


练 习 题 


(1) Photoshop 文档 的 扩展 名 是 什么 ?” 它 有 什么 特点 ? 
(2) Photoshop 的 主要 功能 有 哪些? 

(3) 如 何 应 用 Photoshop 的 滤 镜 ? 

(4) Photoshop 蒙 版 的 通道 有 什么 功能 ? 


上 机 实验 


1. 实验 要 求 


(1) 完成 图 片 合成 效果 。 要 求 : 根据 给 定 素材 ,利用 Photoshop 中 的 图 层 混合 模式 、 
图 层 样式 等 制作 如 图 13. 33 所 示 的 “灯泡 里 的 金鱼 ”效果 。 


网 站 规划 与 网 页 设计 


(2) 制作 网 页 导航 栏 。 要 求 : 


13.33 灯泡 里 的 金鱼 


(3) 制作 电子 商务 网 站 首页 
进行 网 页 设计 ,如 图 13. 35 所 示 。 


顶部 导航 

Banner 横 幅 一 一 一 
数码 产品 区 E 

中 间 产 品 了 phene 
相机 Camera Rd 
电脑 Computer 
raevion 


1 。 要 求 : 首先 对 网 站 首页 进 


3. 34 所 示 。 


13.34 网 页 导航 栏 


井 行 构图 ,然后 利用 Photoshop 


EME WE Ne 


太守 季 及 一 和 人 48。 商社 。 和 和 南 。 支付 方式 。 个 告 了 务 。 售后 服务 。 特色 服务 。 友 全 人 近 


图 13.35 电子 商务 网 站 首页 


2. 背景 知识 


根据 所 学 的 网 页 设计 的 基础 理论 和 Photoshop 的 基本 操 
3. 实验 准备 工作 


将 相应 的 Photoshop 的 PSD 样 图 、 素 材 文件 发 送 到 


果 作 技能 完成 本 实验 。 


主机 中 ,以 供 学 生 参 考 使 用 。 
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4. 课时 安排 
上 机 实验 安排 8 课时 ,实验 要 求 (1) 为 2 课时 ; (2) 为 2 课时 ; (3) 为 4 课时 。 
5. 实验 指导 


1) 制作 “灯泡 里 的 金鱼 ” 
操作 步 又 如 下 。 
(1) 打开 素材 1( 灯 泡 ) ,再 打开 素材 2( 水 样 ) ,在 素材 2 中 ,选择 “移动 "工具, 按 住 鼠 


标 左 键 ,将 其 拖 入 灯泡 中 。 


(2) 打开 图 层面 板 , 如 图 13. 36 所 示 ,选中 图 层 1 ,调整 素材 2 的 位 置 和 尺寸 ,将 该 图 


层 的 混合 模式 设置 为 “明度 ”, 效 果 如 图 13. 37 所 示 。 


具 


泡 


» 


~ 


图 13.36 图 层面 板 图 13.37 修改 图 层 混合 模式 后 的 效果 图 


(3) 修改 图 层 1 的 不 透明 度 ,将 不 透明 度 设置 为 40% 。 
(4) 单 击 图 层 1, 选 择 “ 椭 圆 选 框 ” 工 具 ,绘制 椭圆 形 。 框 选中 灯泡 部 分 ,如 图 13. 38 所 


, 单 击 * 添 加 图 层 蒙 版 ?按钮 ,为 图 层 1 添加 蒙 版 ,设置 前 景色 为 黑色 ,再 选择 “画笔 " 工 
,设置 适当 的 画笔 大 小 进行 涂抹 ,将 多 余部 分 抹 去 ,显示 效果 为 灯泡 中 有 水 。 


(5) 打开 素材 3( 气 泡 ) ,选择 “椭圆 选 框 " 工 具 , 按 下 Ctrl 键 , 选 中 大 小 不 同 的 多 个 气 


,复制 如 图 13. 39 所 示 的 选区 ;切换 到 “灯泡 ”图像 文 件 粘贴 选区 ,将 此 层 命 名 为 “图 层 
,为 其 添加 蒙 版 ,设置 前 景色 为 黑色 ,选择 “画笔 ”工具 ,设置 适当 的 画笔 大 小 进行 涂抹 ， 


抹 去 多 余 的 气泡 。 


重复 以 上 选 气泡 ,复制 、 粘 贴 、 添 加 蒙 版 \ 抹 去 多 余 气泡 等 操作 步骤 ,在 灯泡 中 产生 气 


泡 效 果 , 将 此 层 命 名 为 “图 层 3”, 如 图 13. 40 所 示 。 


图 13.38 椭圆 选区 图 13.39 选取 气泡 图 13.40 合并 气泡 图 层 


< 网 站 规划 与 网 页 设计 | 国生 


(6) 打开 素材 4( 鱼 ) ,选择 “移动 "工具, 按 住 鼠 标 左 键 ,将 鱼 拖 入 到 灯泡 图 像 文件 中 ， 
将 此 层 命名 为 图 层 4, 选 择 * 自 由 变换 ?工具 ,缩小 图 像 。 

(7) 选择 “移动 ”工具 ,将 此 层 置 于 气泡 ,水 样 图 像 所 在 图 层 下 方 ,设置 图 层 4 的 混合 模 
式 为 “正片 疤 底 ”。 单 击 “ 添 加 图 层 蒙 版 ”按钮 ,为 图 层 4 添加 蒙 版 ,设置 前 景色 为 黑色 ,选择 
画笔 工具 ,设置 适当 的 画笔 大 小 进行 涂抹 ,将 多 余部 分 抹 去 ,得 到 最 终 效 果 , 如 图 13. 33 所 示 。 

2) 导航 条 制作 

导航 条 是 网 站 建设 的 基本 元 素 之 一 ,利用 Photoshop 制作 导航 条 非常 便利 。 

操作 步骤 如 下 。 

(1) 新 建 一 个 500X400( 像 素 ) 的 文档 , 按 下 Ctrl 十 A 组 合 键 ,选中 整个 画布 ,背景 填 
充 颜 色 为 #1blblb。 

(2) 新 建 一 个 图 层 ,选择 “矩形 选 框 " 工 具 ,绘制 尺寸 为 288X50( 像 素 ) 的 矩形 选区 , 填 
充 颜 色 为 #5a5a5a。 

(3) 双击 此 图 层 , 添 加 “内 阴影 "和 “渐变 倒 加 ”图 层 样式 。 

“内 阴影 ”样式 : 混合 模式 为 “正常 ”, 颜 色 为 白色 ,其 他 参数 如 图 13. 41(a) 所 示 。 


杂 eN:D [ol% 缩放 人 G); QO— [s+ ]w 
(a) 内 阴影 (b) 渐变 到 加 


图 13.41 添加 图 层 样 式 


“渐变 番 加 ”样式 : 渐变 颜色 为 黑色 至 白色 ,混合 模式 为 “正常 ”, 不 透明 度 为 13% ,其 
他 参数 如 图 13. 41(b) 所 示 。 

(4) 复制 该 图 层 , 建 立 多 个 按钮 ,并 输入 所 需 文本 。 

(5) 在 第 一 个 按钮 的 左 侧 绘制 一 个 圆 ,适当 添加 图 层 样式 ,并 绘制 一 个 箭头 。 

(6) 最 后 ,将 背景 填充 为 渐变 色 ,设置 渐变 颜色 为 黑色 一 # 0438fb, 得 到 的 最 终 效果 
如 图 13. 34 所 示 。 

3) 设计 网 页 首页 

网 站 首页 大 致 由 四 大 部 分 构成 : 顶部 导航 、Banner 横幅 .中 间 产 品 区 、 底 部 导航 。 中 
间 产 品 区 最 为 重要 ,尽量 要 制作 得 精美 大 气 一 点 ,这 样 才 有 吸引 力 。 

(1) 定义 背景 图 案 。 打 开 背 景 图 片 ,选择 “编辑 ”菜单 一“ 定义 图 案 ” 命 令 , 命 名 图 案 ， 


ErD A 第 13 章 利用 Photoshop 设 计 网 页 [< ) 


单 击 “ 确 定 ” 按 钮 关闭 该 文件 。 

(2) 创建 文件 ,将 画布 尺寸 设置 为 1100 X1300( 像 素 )。 选 择 “ 油 漆 桶 ”工具 ,设置 为 
“图 案 ” 填 充 ,选择 刚 制作 好 的 图 案 纹 理 , 填 充 画 布 。 

(3) 选择 * 圆 角 和 矩形 工具 , 圆 角 半 径 为 5 像素 ,在 页 面 上 方 绘制 圆 角 矩形 , 按 下 Ctrl 十 T 
组 合 键 ,设置 变形 尺寸 为 330X45( 像 素 ) ,双击 此 图 层 , 添 加 * 渐 变 大 加 ”图 层 样式 ,渐变 颜 
色 为 #fdb913 一 #ffcb05, 其 他 参数 如 图 13. 42 所 示 .请 记 住 此 矩形 的 图 层 样 式 , 在 下 面 的 
步骤 中 会 多 次 用 到 它 。 

(4) 绘制 搜索 框 ,效果 如 图 13. 43 所 示 。 选 择 * 圆 角 矩 形 ” 工 具 , 绘 制 圆 角 和 矩形 ,双击 
此 图 层 , 添 加 * 投 影 "“ 内 阴影 "和 * 颜 色 释 加 ”图 层 样式 ,参数 如 图 13. 44 所 示 。 输 入 文本 
“请 在 这 里 搜索 ”。 绘 制 黄色 (# ffbe0e) 圆 角 和 矩形 ,添加 “外 发 光 ” 图 层 样式 , 置 于 搜索 框 
内 ,参数 自 定义 ,输入 文本 “搜索 ”。 


图 13.42 图 层 样 式 设置 图 13.43 绘制 搜索 框 
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图 13.44 ”搜索 框 几 个 图 层 样式 参数 


(5) 绘制 语言 下 拉 列 表 框 。 与 上 步 操作 相同 ,绘制 圆 角 矩形 ,应 用 搜索 框 的 图 层 样式 , 导 
入 国旗 素材 图 ,绘制 上 方 黄色 (# ffbe0e) 的 导航 矩形 和 输入 导航 文本 信息 ,如 图 13. 45 所 示 。 


图 13.45 绘制 导航 条 上 部 内 容 


a [ 网 站 规划 StRi] 


(6) 绘制 导航 条 。 绘 制 一 个 黑色 的 圆 角 矩形 ,添加 适当 的 图 层 样 式 , 形 成 为 导航 栏 区 
域 ,在 导航 条 区 域 下 方 绘 制 一 个 宽度 相同 、 颜 色 为 黄色 (#ffbe0e) 的 圆 角 和 矩形 ,将 其 机 格 
化 ,选择 “矩形 选 框 ?工具 ,选中 上 半 部 分 ,将 其 删除 ,再 为 剩余 部 分 添加 适当 的 图 层 样 式 。 

(7) 绘制 按钮 。 选 择 * 圆 角 和 矩形 ”工具 ,颜色 为 黄色 (# ffbe0e) ,绘制 圆 角 矩 形 ,为 其 添 
加 适当 的 图 层 样 式 。 

(8) 添加 导航 文本 :“ 首 页 ”“ 数 码 区 ”“ 服 装 区 ”等 ,按钮 处 文本 为 黑色 ,其 他 颜色 均 
为 黄色 (#ffbe0e)。 

(9) 添加 网 站 名 称 : X X XxX 电子 商城 ,最 终 效 果 如 图 13. 46 所 示 。 


图 13.46 顶部 导航 条 制作 


(10) 制作 Banner 横幅 。 越 来 越 多 的 网 站 采用 大 版 面 的 Banner 图 片 吸 引 大 家 的 注 
意 力 。 导 入 广告 素材 图 像 ,适当 调整 广告 图 像 的 位 置 和 尺寸 ,在 广告 图 下 方 中 间 位 置 , 绘 
制 矩 形 , 颜 色 为 灰色 ,适当 添加 “图 层 样式 ”, 输 入 文本 “点 击 进入 更 多 精彩 ”, 如 图 13. 47 
所 示 。 


图 13.47 网 站 Banner 添加 


(11) 绘制 中 间 产 品 区 。 绘 制 较 大 的 白色 和 撼 形 , 在 其 中 导入 多 张 产品 图 片 。 在 这 个 和 矩 
形 区 主要 展示 主 销 的 产品 ,在 每 个 产品 之 间 选 择 * 直 线 ? 工 具 , 画 若干 条 线条 将 其 分 割 , 这 
些 线条 颜色 选用 浅 灰 色 即 可 。 选 择 * 圆 角 拢 形 ? 工 具 , 绘 制 黑色 圆 角 和 抑 形 ,添加 适当 的 图 层 
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样式 ,设置 为 按钮 效果 ,并 添加 文本 “立即 抢 购 ”。 再 绘制 黄色 (#ffbe0e) 圆 角 和 矩形 ,为 其 
添加 适当 的 图 层 样式 ,设置 为 按钮 效果 ,添加 文本 ,如 “特价 : 2999” 等 ,如 图 13. 48 所 示 。 
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图 13.48 添加 网 站 商品 


(12) 绘制 侧 边 导航 条 和 简单 的 页 脚 导航 。 绘 制 侧 边 导航 条 和 简单 的 页 脚 导 航 效 果 
如 图 13. 49 所 示 。 
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